Bootstrap: Organize Columns Simultaneously with Push and Pull for Customized Column Ordering

I am experiencing an issue with the concurrent use of "Push" and "Pull" column ordering classes.

I would like my columns to be ordered like this:

However, the result on medium and larger screen sizes is

<section style="direction:rtl;">
<div class="container">
<div class="row">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-4 col-sm-push-8 col-md-3 col-md-push-9"><div class="well">Column 1</div></div>
      <div class="col-sm-4 col-sm-push-0 col-md-3 col-md-push-3"><div class="well">Column 2</div></div>
      <div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-3"><div class="well">Column 3</div></div>
      <div class="col-sm-4 col-sm-push-8 col-md-3 col-md-pull-9"><div class="well">Column 4</div></div>
      <div class="col-sm-4 col-sm-push-0 col-md-3 col-md-push-9"><div class="well">Column 5</div></div>
      <div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-push-3"><div class="well">Column 6</div></div>
      <div class="col-sm-4 col-sm-push-8 col-md-3 col-md-pull-3"><div class="well">Column 7</div></div>
      <div class="col-sm-4 col-sm-pull-0 col-md-3 col-md-pull-9"><div class="well">Column 8</div></div>
      <div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-push-9"><div class="well">Column 9</div></div>
      <div class="col-sm-4 col-sm-push-8 col-md-3 col-md-push-3"><div class="well">Column 10</div></div>
      <div class="col-sm-4 col-sm-pull-0 col-md-3 col-md-pull-3"><div class="well">Column 11</div></div>
      <div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-9"><div class="well">Column 12</div></div>
    </div>
  </div>
</div>

csstwitter-bootstrap

Answer №1

To fix the layout issues on medium (md) and large (lg) screens, you should reset the push and pull classes that are being carried over from small (sm) screens.

<div class="col-sm-4 col-sm-push-8 **col-md-push-0** col-md-3 col-md-pull-9"><div class="well">Column 4</div></div>

http://www.bootply.com/1NedaZMxUf

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

Tips for concealing the check mark within a checkbox upon selection

I have checkboxes arranged in a table with 23 columns and 7 rows. My goal is to style the checkboxes in a way that hides the check mark when selected. I also want to change the background image of the checkbox to fill it with color when marked. Can someone ...

javascriptjqueryhtmlcss

Customize the Header Background Color in React Table

I'm working on customizing a re-useable table component using vanilla CSS. I have defined six color variables and want users to be able to select one of them to change the table header background color. However, I am unsure how to make this color choi ...

cssreactjsreact-component

Comparing CSS rules: the faster option between specifying multiple IDs or not

Recently, I have been heavily involved in working with Concrete5. It has come to my attention that the default theme contains numerous CSS rules that are defined in this manner: #page #central #sidebar p{line-height:24px} Considering that "sidebar" is an ...

cssperformancedomcss-selectors

Is there a way to adjust the contents of an iframe to match the dimensions of the iframe itself?

I am trying to adjust the width of an iframe to 60%, regardless of its height. Is there a way to "zoom in" on the contents of the iframe to fit the width, so that I can then set the height based on this zoom level? I haven't been able to find any solu ...

javascripthtmlcssiframe

Ways to fill ng-style with a CSS object

Creating a dynamic form to manipulate CSS properties in real time has been my latest project. I've managed to define the CSS property names and values within an object, but now I'm struggling to style the item elegantly on the page as the user in ...

cssangularjs

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

When making a service call using ajax and loading an HTML content on my page, the content includes text, external script calls, and CSS. However, upon loading, the HTML appears distorted for a few seconds before the JS and CSS are applied. Is there a sol ...

javascriptjqueryhtmlcssajax

Striving to convert Celsius to Fahrenheit using ReactJS

I am currently attempting to convert Celsius into Fahrenheit within this specific div. Despite being fairly new to React, I’m finding it challenging to determine where exactly to place the conversion calculation. return ( <div className="app& ...

cssreactjs

How about placing one element above another? What sets apart using the margin property versus the position property for achieving this effect?

As I pondered the concept of stacking context, a question arose in my mind. Through my readings, I learned that by not applying any CSS properties that create a stacking context (such as position), it is possible to stack elements on top of each other usin ...

csspositioncss-positionmargin

A unique way to present data: An HTML table featuring four fixed columns with horizontal scrolling

I've been having difficulty creating a table with fixed first four columns while allowing the rest to scroll horizontally. I came across this example first column fixed Although the example has the first column fixed, I'm struggling to extend it ...

csshtml-table

List that spans the entire width of the browser, with text limited to a maximum width

I've encountered an issue with a full-width list in my browser. It has a background color that changes when hovered over. However, I want the text within each li element to have left-aligned alignment, a maximum width, and equal left and right margins ...

htmlcss

Animation will begin once the page has finished loading

On the website, there is a master page along with several content pages. The desired effect is to have a fade-in animation when navigating between pages. Currently, when clicking on a link, the new page appears first and then starts fading out, but this sh ...

jqueryasp.netcss

Discover the ultimate guide to implement a captivating visual overlay using CSS

I've crafted some links using CSS to incorporate a background image (to give it the appearance of a button) employing the subsequent code: <a class="btnImg" id="btnImgConfig" href="#"></a> .btnImg { width:100px; height:100px; ...

css

Footer division misbehaving

My goal is to add a footer to my website that includes a text field, but for some reason I'm encountering an issue with two of my divs not cooperating. You can observe this problem in this JSFiddle. Here is the CSS code for the footer: .footer { b ...

htmlcss

Arrange the "See More" button in the Mat Card to overlap the card underneath

I'm currently working on a project that involves displaying cards in the following layout: https://i.stack.imgur.com/VGbNr.png My goal is to have the ability to click 'See More' and display the cards like this: https://i.stack.imgur.com/j8b ...

cssangular

What is the best way to show the initial image within every div that has the class name .className?

I am looking to only show the first image in each div with the class name "className." This... <div class="className"> <p>Yo yo yo</p> <p><img src="snoop.jpg" /></p> </div> <div class="className"> Hel ...

javascriptjqueryhtmlcss

Using -webkit-hyphens: auto in Safari does not function properly when the width is set to auto

I have a situation with an h3 element where I am unsure of its width. As a result, the width is set to auto by default. However, I need the text inside this element to have hyphenation applied to it. This h3 element is within a flex container along with an ...

htmlcsshyphenationcss-hyphens

Improprove Google PageSpeed score - must resolve

My mobile website is loading incredibly slow, despite my attempts to improve the speed using Google PageSpeed insights. Unfortunately, I'm having trouble interpreting the screenshot and identifying what changes need to be made. Is there anyone who c ...

jqueryhtmlcsspagespeedgoogle-pagespeed

Completion of the form within the Bootstrap popover

I have a feature where dynamically created rows contain an "add" button. When the user clicks on the add button, a form is loaded into a Bootstrap popover. See FIDDLE DEMO My issue is: Why isn't this code being triggered? I am trying to validate ...

javascriptjqueryajaxtwitter-bootstrap

Adjusting Window Size Causes White Space to Appear Above Div

I currently have two inline-block div in my post page that showcase my latest book reviews. Typically, these sections align perfectly and occupy the same amount of space on the screen. However, for certain window sizes, one of the inline-block elements end ...

htmlcss

Assigning a new classification to the primary object in the evolving array of objects

I'm working with an element that loops through all the objects using v-for and has a CSS class named top-class{}... I need to dynamically add the top-class to the first object (object[0]) and update it based on changes, removing the old top-class in t ...

javascriptcssvue.jsobjectvuejs2