Bootstrap: Move/Combine nested rows into other columns

Question

I have a layout with main content in the middle and an action/info stuff on the right sidebar. (the left sidebar is hidden on mobile). I am hoping to combine these bootstrap columns. I want the first row of the right sidebar column to be between the two rows of the middle/main column when viewing on mobile. And the second row of the right sidebar column to come after all rows of the middle/main column when viewing on mobile. Here's what it looks like on large:

|------| |----|
| c1r1 | |c2r1|
|      | |----|
|------| |c2r2|
| c2r2 | |    |
|      | |----|
|      | 
|      |
|------|

And here's what I need it to look like on small (I started coding for mobile first, but it's easiest to show from large to small):

|------|
| c1r1 |
|      |
|------|
| c2r1 |
|------|
| c1r2 |
|      |
|      |
|------|
| c2r2 |
|------|

Is there a way to achieve this organically using bootstrap or other css? If I use just one column for both, then the height of each row will be the same and/or not line up correctly with the elements above/below.

Here's basically my code:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 d-none d-md-block">
            <div class="row">Some stuff in the first col that doesn't show on small</div>
        </div>
        <div class="col-12 col-md-6">
            <div class="row">The main column first row</div>
            <div class="row">The main column second row</div>
        </div>
        <div class="col-md-3 col-sm">
            <div class="row">Sidebar action item stuff that should go below the main column first row</div>
            <div class="row">Sidebar info that should go below the main column second row</div>
        </div>
    </div>
</div>

score 0 · Answer 1 · answered May 19 '21 at 18:58

0

The problem is that I was using nested rows/columns. If I put everything into one row, then I can use float and order to get the desired results. https://stackoverflow.com/a/52043188/14183408

answered May 19 '21 at 18:58

loveaphair

11
1

score 0 · Answer 2 · answered May 19 '21 at 23:39

You can add flex layout to your html elments

I used "Bootstrap" to help with the styling. "d-flex flex-column"

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="col-md-3 d-none d-md-block">
    <div>Some stuff in the first col that doesn't show on small</div>
  </div>
  <div class="row border d-flex flex-column">
    <div class="col-4 col-md-4 border">
      <b>Column one Row one:</b> The main column first row
    </div>
    <div class="col-4 col-md-4 border"><b>Column two Row one:</b> Sidebar action item stuff that should go below the main column first row</div>
  </div>
  <div class="row border d-flex flex-column">
    <div class="col-4 col-md-4 border">
      <b>Column one Row two:</b> The main column second row
    </div>
    <div class="col-4 col-md-4 border"><b>Column two Row two:</b> Sidebar info that should go below the main column second row</div>
  </div>
</div>

Bootstrap: Move/Combine nested rows into other columns

2 Answers2