0

I'm trying to create the following layout:

Link to example image

When the page is smaller - the blue column should go under the red column.

No matter what I try - the issue is the red box always wants to be the same height as the blue box.

https://codepen.io/LeeBow/pen/eYKGzdb

<div class="container-fluid">
<div class="row">
  <div class="col-md-8 order-md-1">
      <div
 style="height:100px;width:100px;background-color:red"></div>
  </div>
  <div class="col-md-4 order-md-3"><div style="height:300px;width:100px;background-color:blue"></div></div> 
</div>
<div class="row">   
    <div class="col-md-4 order-md-2"><div style="height:100px;width:100px;background-color:green"></div></div>
</div>
</div>

I would like my green box to move under the red box.

The red box always stays the same height as the blue box. It moves under the red box correctly when the screen is smaller.

But the green box will not move under the red box.

isherwood
  • 58,414
  • 16
  • 114
  • 157
LeeBow
  • 13
  • 3
  • Please see [ask], then revise your post title to ask a clear, specific question. – isherwood Nov 16 '22 at 17:33
  • Does this answer your question? [Bootstrap 4 - How to change order on mobile?](https://stackoverflow.com/questions/48848937/bootstrap-4-how-to-change-order-on-mobile) – isherwood Nov 16 '22 at 17:34
  • Or this? [Bootstrap with different order on mobile version](https://stackoverflow.com/questions/48882342/bootstrap-with-different-order-on-mobile-version) – isherwood Nov 16 '22 at 17:35
  • The syntax is slightly different with Bootstrap 5, but the concepts are the same. See https://getbootstrap.com/docs/5.2/layout/columns/#order-classes. – isherwood Nov 16 '22 at 17:36

1 Answers1

0

Make two blue boxes:

  • one for desktop (use classes d-md-block d-none) and
  • one for mobile (use classes d-md-none d-block, which is the opposite from above).

Those classes are Bootstrap classes to manipulate display CSS property.

See the snippet below.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <div style="height:100px;width:100%;background-color:red"></div>
      <div class="d-md-none d-block" style="height:300px;width:100%;background-color:blue"></div> <!-- Show on mobile -->
      <div style="height:100px;width:100%;background-color:green"></div>
    </div>
    <div class="col-md-4 d-md-block d-none">
      <div style="height:300px;width:100%;background-color:blue"></div> <!-- Show on desktop -->
    </div>
  </div>
</div>
Rok Benko
  • 14,265
  • 2
  • 24
  • 49
  • 1
    Thank you - This works perfect - I'm not sure how "SEO" this would be, as it's duplicating and hiding content? -- but this does exactly what I was I was trying to achieve. Thanks for taking the time to answer this. – LeeBow Nov 16 '22 at 21:29