1

I'm trying to create a layout that is pretty similar to the following (on large screens),

 +----------------------------------+
 |               Header             |
 +-------------------------+--------+
 |                         |        |
 |                         |Object A|
 |                         |        |
 |                         +--------+
 |                         |        |
 |      Main Content       |        |
 |                         |Object B|
 |                         |        |
 |                         |        |
 |                         +--------+
 |                         |        |
 |                         |        |
 +-------------------------+--------+
 |               Footer             |
 +----------------------------------+

using Bootstrap 4. I understand that Bootstrap's approach is mobile-first, and since I want the above just to stack one above the other on mobile devices, I defined it like this,

<div class="container">
    <div class="row">
        <div class="row mx-auto">
            <h1>Header</h1>
        </div>
        <div class="row justify-content-end">
            <!-- Object A -->
            <div class="col-xs-12 order-xs-1 col-lg-5 order-lg-1 px-4 align-content-end">
            </div>                
            <!-- Main Content -->
            <div class="col-xs-12 order-xs-2 col-lg-7 order-lg-3 px-4 align-content-start flex-shrink-1">
            </div>
            <!-- Object B -->
            <div class="col-xs-12 order-xs-3 col-lg-5 order-lg-2 px-4 align-content-end">
            </div>                
        </div>
        <!-- Footer -->
        <div class="row mx-auto">
            <h6>All Rights Reserved © 2020</h6>
        </div>
    </div>
</div>

And while on mobile devices I get the expected result, on wide screens the result is Object A and Object B are on top, right next to each other, and Main Content is just under them.

tldr; I'm trying to achieve the above layout on PC while on Mobile I want it to be stacked in the following order: [Header][Object A][Main Content][Object B][Footer] but fails to make both work on the same HTML code.

Pathong
  • 53
  • 5
  • Probable Duplicate - https://stackoverflow.com/questions/33947885/left-column-and-stacked-right-column-using-flexbox-css – Paulie_D Jul 07 '20 at 08:34
  • I guess you could call it a dupe if this was a vanilla CSS questsion, but I'm trying to understand if predefined Bootstrap 4 properties can result in the layout I'm looking after. – Pathong Jul 07 '20 at 11:47

1 Answers1

0

In order to obtain the structure you want you have to create a "subrow" in your table: (open full page for desktop display)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
  <div class="row mx-auto">
      <h1>Header</h1>
  </div>
  <div class="row justify-content-end">
      <!-- Main Content -->
      <div class="col-xs-12 order-xs-2 col-lg-7 px-4 align-content-start flex-shrink-1">
        MAIN
      </div>
      <div class="col-xs-12 order-xs-1 col-lg-5 px-4 align-content-end">
        <div class="row"> 
          <!-- Object A -->
          <div class="col-12">
            A
          </div>    
          <div class="col-12">
            B
            </div> 
          </div>             
        </div>
     </div>
    <!-- Footer -->
    <div class="row mx-auto">
        <h6>All Rights Reserved © 2020</h6>
    </div>
</div>
Greedo
  • 3,438
  • 1
  • 13
  • 28
  • thanks for your answer mate, but I want `A` to come before `MAIN` on smaller screens – Pathong Jul 07 '20 at 07:42
  • In this case i would: duplicate A (in case it is small/ it is a separate component) or use JS to move the element across the DOM on small screens – Greedo Jul 07 '20 at 07:49