Skip to main content
Inspiring
October 29, 2021
Question

Swap which content block appears first in mobile view

  • October 29, 2021
  • 3 replies
  • 198 views

On desktop view the two content blocks display side-by-side. On mobile view, they stack in a single col, however, the content gets swapped so that the content that would ordinarily be in the right-hand block on desktop view now takes first place in mobile view.

How can I modify that so it remains secondary content?

 

<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">

<div class="col-lg-6 order-lg-2 features">

<h2>Header</h2>
<p class="lead mb-0">Text here.</p>
<p class="lead mb-0">Text here.</p>

</div>

<div class="col-lg-6 order-lg-1 my-auto showcase-text">

<h2>Header</h2>

<p>Text here.</p>
</div>
</div>
</div>
</section>

 

Thank you.

    This topic has been closed for replies.

    3 replies

    Legend
    October 29, 2021

    Sounds like you have the construction set up incorrectly initially for desktop as the right hand column should always reposition itself beneath the left hand column. You would not need to manipulate anything as its the default stacking order BUT it seems for some reason your using 'order-lg-2' 'order-lg-1' for desktop which would only be necessary IF you wanted the right hand column to sit before the left hand column.........why do you need those classes for desktop If you want a default stacking order is the question.

     

    You would reverse the 'order' at either md or sm break point (see in bold below) but the question remains - not sure why youre ordering the right column before the left column for desktop.

     

    <div class="col-lg-6 order-lg-2 order-md-1 features">

     

    <div class="col-lg-6 order-lg-1 order-md-2 my-auto showcase-text">

    Nancy OShea
    Community Expert
    Community Expert
    October 29, 2021

    See Re-ordering Content on Desktops with Bootstrap 4.  Bootstrap is a mobile-first framework so that is your default order sequence.

    https://codepen.io/JacobLett/pen/xRadPZ

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Community Expert
    October 29, 2021

    Which version of Bootstrap are you using?

     

     

    Nancy O'Shea— Product User & Community Expert