Forum Moderators: not2easy

Message Too Old, No Replies

Bootstrap grid - invert order of items on mobile

Is it possible to invert span order in bootstrap 2.3.2 grid?

         

a0394

4:15 pm on Jan 30, 2020 (gmt 0)

5+ Year Member



Hi everyone,

i'd like to know if it's possible to invert the order of the spans inside a bootstrap grid (v. 2.3.2, i know it's old, but it's the one used by the template of the website i'm currently working on).
To better clarify what i'm trying to achieve:

Let's say i have this grid on desktop:

<div class="container-fluid">
<div class="row-fluid">
<div class="span6">IMG</div><div class="span6">TEXT</div>
</div>
<div class="row-fluid">
<div class="span6">TEXT</div><div class="span6">IMG</div>
</div>
</div>

Is it possible to invert the order, having it to look on mobile like this:
IMG
TEXT
IMG
TEXT

instead of what would be normally displayed (IMG->TEXT->TEXT->IMG)

Thanks in advance, have a nice day!

not2easy

3:03 pm on Feb 3, 2020 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



The problem with trying to make changes using CSS to a layout created with bootstrap is that bootstrap uses its own proprietary .css file (something like bootstrap.min.css) which isn't always amenable to adjustments. It is CSS the same as any .css file, but making some minor change to alter one element can have far reaching consequences. If you insert media queries that alter the performance of "span6" divs for example, it will affect ALL span6 elements on the site. You would be better off to specify your own separate classes in a separate .css file (and call both .css files on load) or risk making unwanted changes if you are using bootstrap classes throughout the layout. Even if such a change were simple, suggestions on editing bootstrap's .css file need to have a much wider view than what's practical here.

You can use scripting such as javascript and
document.getElementsByClassName("whatever") 
but again without a container class that is unique to the parts you want to alter, it can have unwanted effects.