What is the best way to rearrange the sequence of Bootstrap columns?

Looking to switch up the column order in Bootstrap 4's flexbox grid system?

Here's the current code:

<div class="contents">
  <div class="row row-1">
    <div class="col-sm-6">Content Left</div>
    <div class="col-sm-6">Content Right</div>
  </div>
  <div class="row row-2">
    <div class="col-sm-6">Content Right</div>
    <div class="col-sm-6">Content Left</div>
  </div>
  <div class="row row-3">
    <div class="col-sm-6">Content Left</div>
    <div class="col-sm-6">Content Right</div>
  </div>
  <div class="row row-4">
    <div class="col-sm-6">Content Right</div>
    <div class="col-sm-6">Content Left</div>
  </div>
</div>

If you want every even row to have its columns' orders reversed, check out this CSS snippet:

.row:nth-child(2n) .col-sm-6:first-child{
   float:right;
}

Take a look at the JSFiddle for more: https://jsfiddle.net/bq1L3gax/

csstwitter-bootstrapflexboxbootstrap-4

Answer №1

Latest Bootstrap 5 Update for 2021

Bootstrap 5 still utilizes flexbox, so changing the order of columns remains unchanged. However, the classes order-6 through order-12 have been removed in Bootstrap 5 and replaced with new re-ordering options.

  • order-{breakpoint}-first
  • order-{breakpoint}-last
  • order-{breakpoint}-0
  • order-{breakpoint}-1
  • order-{breakpoint}-2
  • order-{breakpoint}-3
  • order-{breakpoint}-4
  • order-{breakpoint}-5

The {breakpoint} values can be none (for xs), sm, md, lg, xl, or xxl.

Check out Bootstrap 5 order examples here

Previous Bootstrap 4 Update in 2018

No additional CSS is needed when utilizing the flexbox ordering utilities.

View demo: 

<div class="contents">
  <div class="row row-1">
    <div class="col-sm-6">Content Left</div>
    <div class="col-sm-6">Content Right</div>
  </div>
  <div class="row row-2">
    <div class="col-sm-6">Content Right</div>
    <div class="col-sm-6 order-first">Content Left</div>
  </div>
  <div class="row row-3">
    <div class="col-sm-6">Content Left</div>
    <div class="col-sm-6">Content Right</div>
  </div>
  <div class="row row-4">
    <div class="col-sm-6">Content Right</div>
    <div class="col-sm-6 order-first">Content Left</div>
  </div>
</div>

The ordering classes are now order-first, order-1, order-2, etc...

Visit this link for more details

Another approach involves using the flexbox direction utilities.

<div class="row flex-row-reverse flex-md-row">
    <div class="col-6">A</div>
    <div class="col-6">B</div>
</div>

Explore more possibilities here

Answer №2

Take a look at this fresh JSFiddle link: https://jsfiddle.net/bq1L3gax/5/

To achieve the desired result, simply utilize the CSS order property.

.row:nth-child(2n) .col-sm-6:first-child {
   order: 2;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The website is showing up blank when accessed on mobile devices

One of the websites we recently worked on used to appear correctly on iPhone and Blackberry, but now it shows up as blank on both devices. Interestingly, the site still displays as usual on iPad even though we never created a specific mobile version for ...

htmlcssiosmobile

Storing historical data of file uploads on user accounts using PHP

I need a solution to keep track of the files uploaded by users on my website using PHP sessions. My goal is to allow users to see a list of their uploaded files once they log in to the designated page for file uploads. Can this be achieved using only PHP ...

phpmysqlhtmlcsssession

The orientation of the navbar is set to vertical rather than horizontal

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <div id="navigation"> ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

What is the best way to remove the box-model from an element?

Within my VueJS project, I am faced with nested elements that are generated dynamically like this: <container> <outerElement class="outer" v-for="obj in objects"> <innerElement class="inner" v-for="el ...

htmlcssvue.js

Utilizing React Bootstrap with TypeScript for Styling Active NavItem with Inline CSS

Is it possible to change the background color of the active NavItem element to green using inline CSS in React Bootstrap and React Router Dom? I am currently using TypeScript 2.2 and React. If not, should I create a CSS class instead? Here is the code sni ...

csstwitter-bootstrapreactjstypescriptreact-bootstrap

Can you make two columns in CSS that are left floated and maintain their original order?

While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal. Essentially, I have a blog that displays my sto ...

javascripthtmlcss

Aligning an SVG icon at the center of a button

I have elements that are currently being used as buttons, but I want to switch them out for actual button tags. This would improve accessibility and allow keyboard navigation using the tab key to focus on my buttons. Each button contains a centered SVG ima ...

htmlcsssvgbutton

Troubleshooting: CSS border-radius issue with embedded iframe

I am struggling to embed an iframe from my Blogger site into a specific section on my website and round its corners using CSS. I followed a tutorial that suggested using overflow: hidden;, but for some reason, it's not working in my case - see the ima ...

htmlcssiframe

Insert a new div directly underneath the specific div that was clicked within a series of divs

https://i.sstatic.net/gSj3D.png I am facing a situation where I have a list and need to render a box below a specific row when it is clicked. The challenge is to ensure that the other rows are shifted down accordingly. Is there any plugin that can help wi ...

htmlcssreactjsfrontend

Creating a mesmerizing parallax effect for your image: A step-by-step guide

Looking for help to create a parallax effect on an image when hovered over. Does anyone have any advice or resources? Feeling frustrated at the moment. Here is an example link for reference: http://codecanyon.net/item/jquery-moving-perspective/full_scre ...

javascriptjquerycssimage

Scroll to the top of jQuery DataTables when clicking pages in a random order from the bottom to the top and

In my current project, I am working with jQuery Datatables and I need to customize its default behavior. Currently, when I navigate to page 61, the page scroll remains at the bottom of the page. However, if I then click on a lower page number like 60, th ...

javascriptjqueryhtmlcssdatatables

Merge floating and absolute positioning techniques

Creating a calendar exhibiting all events in one div requires precise positioning based on the values of top and height. Let me demonstrate this concept. In the image below, both 6am events are aligned vertically. This alignment issue can be resolved by u ...

javascripthtmlcsscss-floatabsolute

Animating Text with CSS for Different Message Lengths

I have been exploring alternatives to the marquee tag and discovered a way to achieve this through CSS. However, the messages I am working with vary in length. Is there an alternative to setting the '45s' attribute to maybe 100% so that regardles ...

htmlcssmarquee

Display an HTML image within a span tag and ensure it is aligned to the bottom

I am facing a layout issue with 2 images that are placed side by side within their tag . The sizes of the images are different, but they are both anchored at the top of their parent element. <span style="position: relative; left: 0; top: 0; vertical- ...

htmlcssangularalignment

Utilizing FontAwesome icons instead of png images as a visual source

Is there anyone who can assist me? I currently have SiteSearch360 set up on my website with a full screen search bar that is activated by clicking on an image of a magnifying glass. My goal is to replace the default image (src="https://cdn.sitesearch360. ...

htmlcsssvgfont-awesomeghost-blog

Using CSS to position an element relative/absolute within text inline

Need help aligning caret icons next to dynamically populated text in a navbar menu with dropdown tabs at any viewport size. Referring to positioning similar to the green carets shown here: https://i.stack.imgur.com/4XM7x.png Check out the code snippet bel ...

javascripthtmlcssflexbox

Display a specific paragraph inside a div using jQuery

I am having trouble getting my jQuery code to display a specific paragraph when a particular div is clicked on. My goal is for the content "v" to be displayed if the user clicks on the ".Virus" div, and for the contents of ".screenInfo" to be shown if the ...

javascriptjqueryhtmlcssfunction

The ngbDatepicker within the Bootstrap angular framework is designed to seamlessly integrate with ngbPanelContent without causing overflow issues

I've integrated the ngbDatepicker into a form as shown below <ngb-panel> <ng-template ngbPanelTitle> <div class="row"> <ui-switch (change)="onChange($event,2)" [checked]="profession ...

cssangulartwitter-bootstrapbootstrap-4bootstrap-datepicker

Other elements are unable to conceal Material UI InputBase

Displayed below is a navigation bar that sticks to the top, followed by rows of InputBase components from material-ui. Despite setting the background color of the nav bar to white, the input always appears above the nav. This strange behavior stopped when ...

javascripthtmlcssreactjsmaterial-ui

Aligning an element vertically with the surrounding text on the same line

Trying to incorporate inline input range elements in a way that aligns with the line while also aligning with the right edge of the outer div has proven to be challenging. The HTML on the site is formatted using prettify, resulting in <span> elements ...

htmlcss