Setting push and pull columns in Bootstrap for smaller screen sizes can help to rearrange the layout and improve the

On my page layout with Bootstrap 3.2.0, I have set up the following structure:

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-sm-push-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-pull-6 col-xs-12">3</div>

Everything looks perfect on small screens as shown below:

 -----------------------
|           1           |
 ------------------------
|     3     |     2     |
 ------- ------- -------

However, even though I only want to use col-sm-pull-* and col-sm-push-* for small screens, these classes seem to affect medium and large screens too.

If I try using col-sm-push/pull-* & col-xs-push/pull-*, they end up affecting large and medium screens, which is not my intention.

Medium screen and Large screen Issue:

What I want:                   What I get:
 ------- --------- -----         ------- ----- ---------
|   1   |    2    |  3  |       |   1   |  3  |    2    |
 ------- --------- -----         ------- ----------

So, how can I ensure that Push/pull columns are only applied to smaller screens?

What is causing this issue? How can I resolve it?

Your assistance would be greatly appreciated.

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

To prevent Bootstrap from using push/pull on md and lg, make sure to use *-push-0 and *-pull-0. In addition, you can remove the lg since md alone will suffice in this scenario. This will result in a layout of 1-2-3 on large screens, and 1-3-2 on mobile devices.

<div class="col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-md-5 col-md-push-0 col-sm-6 col-sm-push-6 col-xs-12">2</div>
<div class="col-md-3 col-md-pull-0 col-sm-6 col-sm-pull-6 col-xs-12">3</div>

Check out the demo here: http://www.bootply.com/PPTzE3ONur

Answer №2

Utilize the push and pull functions for col-xs instead of col-sm, like col-xs-push/pull-...

Substitute your current code with this equivalent :

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-push-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-pull-6 col-xs-12">3</div>

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

I must update a bootstrap class name within multiple layers of divs by referring to the parent class

My code structure is set up like this: <div id="main-parent"> <div class="child2"> <div> child2 </div> </div> <div>child3</div> - - - - <div class="ch ...

javascriptjqueryhtmlcss

What is the method to restrict the coverage of the background color within a specific region in HTML?

I am still fairly new to html so I apologize if this is a very basic question for you. Here is the css file that is causing me trouble: .sidepanel-list{ margin-left: 10px; background-color:lightgray; Whenever I run the code, the background color s ...

htmlcss

Using FieldSet in ASP.net Forms

Utilizing the FieldSet element in my web application requires me to customize its style. I aim to change the border color to blue and make the legend bold in color. Any guidance on how to achieve this would be greatly appreciated. Thank you in advance. ...

htmlcss

Issue with :hover pseudo-class in IE8

If you're unsure about my explanation, check out the video for a visual demonstration. Pay close attention to the cursor movements while I attempt to optimize my website for IE8. Hopefully there is a solution to this issue. Thank you in advance! http ...

cssinternet-explorer-8hover

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...

htmlcssselenium-webdriver

Styling Your Email Signup Button with MailChimp

Dear Community, I need assistance with the CSS styling of MailChimp's "Submit" button. I have successfully changed the color and font using CSS, but now I am facing a challenge when trying to adjust the padding and margin of the button. Despite my ef ...

htmlcsswordpressmailchimpsubmit-button

Would it be considered improper to apply ID's to DOM elements for the purpose of automation, as it may transform their CSS classes into individual entities?

Just thinking about the best approach for Automation (such as Selenium). I've been advised against using IDs on elements, as it could result in JS errors (in case of duplicate IDs) and make CSS classes unique. While I see the point, not having IDs can ...

javascripthtmlcssautomation

Tips on switching the direction of the ripple effect on this button code from left to right

Link to button Code Hi there, I'm not very familiar with CSS. Can someone help me create a ripple effect on this button that starts from the right side and moves towards the left? Basically, I want to change the direction of the ripple effect. .butto ...

htmlcss

Text alignment validation in jQuery

utilizing the validation capabilities of the jQuery validation plugin check out: http://jsfiddle.net/Kn3v5/205/ <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <div> <form id ...

jquerycssvalidation

Creating a checklist using HTML and CSS can be achieved by utilizing the <span> element and

I'm having trouble changing the color of a span box to red when I focus on a link. The span successfully changes color when activated, but nothing happens when I try to use the 'focus' pseudo-class. On click, different categories will displa ...

htmlcssangularcss-selectorspseudo-element

Incorporating Material-UI themes within styled components

Trying to incorporate theme spacing value in a styled component but facing issues. Initially, the style was applied to the button, but now it is not working as expected. You can view the problem here: sandbox. import React from "react"; import ...

cssreactjsmaterial-uistyled-components

Having trouble with redirecting a website to its appropriate version for mobile or desktop users?

After creating both the desktop and mobile versions of my website, I have a question. How can I determine whether a visitor is using a mobile phone or a PC when they come to my website? Specifically, if a visitor accesses my website through a mobile devic ...

csshtmlwindows-mobileuser-agent

Why is my main.scss having trouble importing other files?

I am experiencing issues with importing my scss file. First, I created a file called main.scss and added some code to it. All the codes are functioning properly and showing up on the webpage. Next, I created two folders named settings and elements. In ...

csssass

CSS form not aligning properly within wrapper div and appears to be floating outside of it

I am in the process of creating a website that includes a wrapper div containing a: -Header -Content -Footer The issue I am encountering is when I insert regular text into the content section, everything displays properly and the background stretches s ...

htmlcss

CSS Float behaving unexpectedly

body { margin: 0; font-family: arial; line-height: 16px; } #topbar { background-color: #600c0c; width: 100%; height: 46px; color: white; margin: 0; } .fixedwidth { width: 1050px; margin: 0 auto; } #logodiv { padding-t ...

htmlcsscss-float

Applying CSS selectors to target child elements within a select option

I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc). <select name="options[81]" id="select_81" class="required ...

htmlcss

Having issues with implementing CSS3 animations on my webpage

I'm having trouble implementing a bouncing mouse animation on my website. The code works perfectly on another site, but on mine, it's not functioning at all. Here is the CSS code: .mouse { display: block; margin: 0 auto; text-alig ...

csscss-animations

In order to design a v-btn-toggle with vertically aligned buttons, rather than horizontally

I'm currently in the process of developing a quiz using VueJS and Vuetify. My challenge lies in organizing the answer options vertically for the user to select. I attempted to utilize the v-btn-toggle component, but encountered an issue where the butt ...

cssvue.jsvuetify.js

The button is only partially visible

My HTML code for a small web app has a button that says "ok," but it's too tiny to display the text fully. I wonder if I'm missing something with the span element? How can I enlarge the button so that it's bigger and shows the entire "ok" ...

htmlcssbutton

What is the best way to incorporate background color into child rows that are dynamically added in Datatables?

I am dynamically appending child rows to datatables in order to display data that is retrieved dynamically. Below is the code snippet illustrating this: var oTable = $('#myTable5').DataTable(); var tr = $('#'+id).closest('tr' ...

jquerycssdatatables