In a flex column layout with a bigger and a smaller column, can I have the smaller column display fu-CodePudding

I'm using Bootstrap 4. I have a flex layout like

<div class=row>
  <div class=col> larger column </div>
  <div class=col-3> smaller column </div>
</div>

Now when I resize the window to a very small width, the second column is displayed in a new line, all by itself. That's fine. However, it is still displayed in only a fraction of the line's width. That's bad. If there is a linebreak, I would like to have the divs fill the available size. How can I do that?

CodePudding user response：

Kindly use this code

<div >
  <div > larger column </div>
  <div > smaller column </div>
</div>

.col-md-3 takes a third of the screen on tablets and larger screens but on small screens it has no effect.

CodePudding user response：

Since you've added a css tag, here's a pure CSS alternative solution:

.container{
  display: flex;
  flex-wrap: wrap;
}

.larger {
  background: blue;
  flex: 1;
  width: 100%;
  min-width: 75%;
}

.smaller {
  background: red;
  flex: 1;
}

<div >
  <div > larger column </div>
  <div > smaller column </div>
</div>

What I've done here is use flexbox to make use of flex-wrap for wrapping and flex-grow to make them grow to whatever space is available. Then lastly, using min-width to set the larger column to 3/4th of the row. If you're interested in flexbox and how it works, more on it here.

CodePudding user response：

Follow the grid options.

Each row is made up of 12 columns. If you want the second element to take up 3 columns on small screen and above (~576px), but all 12 columns on less than that, the classes to use would be col-12 col-sm-3.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div > larger column </div>
  <div > smaller column </div>
</div>