Twitter Bootstrap 3 - Change column order for extra small screens

My Twitter Bootstrap layout consists of two columns structured like this:

<div class="col-md-4 col-sm-6 col-xs-12">
   <div class="post">
      Content here
   </div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12">
   <div class="post">
      Content here
   </div>
</div>

While the layout scales down perfectly to full-width on xs resolution, I am looking to interchange the positions of these columns. In other words, I want the second column in the code to be displayed first and the first column in the code to be displayed second.

I attempted to use col-xs-pull-12 and col-xs-push-12, but encountered unexpected results with the columns appearing misaligned. Is there a way to swap them using Bootstrap classes? This switch should only take place on xs resolution.

htmlcsstwitter-bootstrapgrid-layout

Answer №1

It's important to correctly utilize the pull and push classes for different screen sizes. For larger devices, follow these steps:

  1. Rearrange your HTML markup to display as desired on mobile devices -- adopting a Mobile First approach.

  2. Integrate push and pull classes to adjust the order of elements on larger screens.

    <div class="col-md-8 col-md-push-4 col-sm-6 col-sm-push-6 col-xs-12">
   <div class="post">
      Content goes here
   </div>
</div>
<div class="col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-6 col-xs-12">
   <div class="post">
      More content here 
   </div>
</div>

For a visual demonstration, refer to this Bootply Demo

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

Can footer.html be omitted from the base.html file when extending it for Django?

I'm using base.html as my template which includes {% include 'footer.html' %} in every page. However, there are certain pages where I don't want the footer to appear. Is there a way to exclude the footer on specific pages using some sor ...

htmldjango

Tips for incorporating a visible HTML comment in JSX code?

Currently implementing ReactJS and facing a requirement to insert visible HTML comments (visible in the html source) within JSX. Unsure of the correct approach to achieve this. A third party vendor necessitates this comment for processing purposes on the ...

htmlreactjscommentsjsx

Issues encountered with integrating external jQuery/JavaScript functions with Wordpress child theme template

After creating a custom template in my WordPress child theme, I added a link to the Bootstrap v3.0.3 .js file stored on my site. While the popup modal is functioning properly, the jQuery tabs seem to be having some issues. Although they are being display ...

javascriptjquerycsswordpress

Disable the ability to scroll the background when the lightbox is opened

Currently incorporating Featherlight for a lightbox feature. Encountering an issue where the background remains scrollable when the lightbox is open. Typically, lightboxes require adding a class to the body with overflow:hidden; to resolve this problem. S ...

jquerycssfeatherlight.js

Issue encountered when attempting to use an HTML document as a blueprint for generating additional HTML documents with the

I am currently working on an exercise that involves creating four different files: index.html, home.html, about.html, and contact.html. The objective is to utilize jQuery's .load function to load the other three HTML files within index.html while stil ...

htmljquery

Flexbox does not support sub-columns

I'm having trouble integrating these two columns along with their sub-columns. I have to resort to using this structure instead: <div class="custom_classes"> <div class="custom_classes">col1</div> <div class=&q ...

htmlcssbootstrap-4flexbox

Tips on moving the first item on the Bootstrap navigation bar to the left side

I have successfully implemented a Bootstrap navigation bar and created a container to display some descriptive text beneath it, as depicted in the image provided. Utilizing the most up-to-date version of Bootstrap has ensured smooth integration. https://i ...

htmlcsstwitter-bootstrapalignmentbootstrap-4

showing information on webpage 2 received via query parameters from webpage 1

Hello, I am trying to input text into a textarea and then send the data through a query string to another webpage. My goal is to display the data on the second webpage. I have written the following code, but it doesn't seem to be working. I've ch ...

javascripthtmljquerycssquery-string

Using the jQuery/JavaScript operator is similar to the SQL LIKE query with the wildcard %

Is there a way to search for a specific part of my input using JavaScript/jQuery? I've tried two different methods, but neither yielded any results. <script type="text/javascript> $("#button").click(function () { $("#DivToToggle").toggle(); ...

javascriptjqueryhtmlweb

Customized input field design for a discussion board platform

I am in the process of creating a forum-style website and I am in search of a unique open source HTML template that includes an editable text box where users can input their posts, similar to what is seen when posting a question or answer. I believe there ...

javascriptjqueryhtml

Combining data-target and ng-click for optimal functionality

Can someone help me troubleshoot why my modal popup is not appearing before the ng-click event gets executed? The ng-click event is functioning correctly, but the modal is not displaying. <a class="btn btn-primary" data-toggle="modal" data-target="#ad ...

angularjstwitter-bootstrap

Creating a secured page with Node.js and Express: Password Protection

I am a beginner with node.js/express! Currently, I am working on developing a chat site along with a chat admin site. When I navigate to _____:3000/admin, it prompts me for a password through a form. I am looking for a way to verify if the entered passwor ...

javascripthtmlnode.jsexpress

Is it expected for every element to return true when checking their visibility with isDisplayed() after performing a get() method

Why are WebDriver get() and isDisplayed() methods not functioning as expected? According to the documentation: This is done using an HTTP GET operation, and the method will block until the load is complete As seen in similar questions such as Wait fo ...

htmlasynchronousseleniumwebdriverrendering

Discovering the amount of attributes possessed by an element with jQuery

If I have an xml element like this: <fruit color="blue" taste="sweet" shape="round"></fruit> Without using jQuery, I could use the following code: fruit.attributes.length How can I achieve the same result with jQuery? ...

javascriptjqueryhtmlxml

Eliminate the focus border in React-Select

I've been struggling to remove the border or outline (not really sure which one it is) from React Select when it's focused. Here is an image for reference. As you can see, I currently have no default border: https://i.stack.imgur.com/IubaN.png ...

cssreactjsreact-select

Ways to make a div fill the whole screen and allow for scrolling as well

Issue I'm facing an issue with the login.php screen and the addphoto.php screen. I want these screens to cover the entire page, but despite using the following code: .login-screen, .form-screen { position: fixed; top: 0; left: 0; disp ...

htmlcss

Explore the power of Infinity.js for optimizing the rendering of large HTML tables, complete with a detailed example using prototype

Is there a way to efficiently load/render large html tables without compromising performance, especially in Internet Explorer? I recently came across a plugin in prototype.js (https://github.com/jbrantly/bigtable/, post: , demo:) that addresses this issue ...

javascriptjquerycsshtml-table

Preloading and rendering an image onto a canvas in a Vue single-page application is not functioning as expected

I am working on a Vue 3 SPA where I am manipulating canvas elements. To preload my image, I am using the function provided below: async preloadLogo () { return new Promise( (resolve) => { var logo_img_temp = new Image(); const logo_s ...

javascripthtmlvue.jscanvas

A step-by-step guide on changing an image

Is it possible to change an image when the user clicks on a link to expand its content? <ul class="accor"> <li> Item 1 <img src="../plus.png"> <p> Lorem ipsum dolor sit amet</p> </li> </ul> $(' ...

javascriptjqueryhtml

Problem occurs when tab links vanish after clicking on another part of the website

Exploring the world of Javascript as a newcomer has been quite an adventure, but I've encountered a hurdle with tab links on my website. Everything seems to be working fine – the links cycle through and display the correct content. However, when it ...

javascripthtml