What is the best way to rearrange Bootstrap columns for extra small screens?

In my bootstrap layout, I have a row with two columns:

<div class="row">
    <div class="col-md-5 col-md-push-7">
       Content in this column should display on the right
    </div>
    <div class="col-md-7 col-md-pull-5">
       Content in this column should display on the left
    </div>
</div>

Currently, the first column displays on the right and the second column on the left. However, on small or extra small screens, the order is reversed.

I am looking to swap the order of the columns on small and extra small devices, displaying the second column first and the first column second. I have attempted this using pull-right and pull-left classes without success.

Your suggestions would be greatly appreciated.

P.S. The divs should stack when viewed on smaller screens.

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

If you're interested in reversing the horizontal column ordering, you can try something like this:

<div class="row">
    <div class="col-xs-5 col-sm-push-7">
       Content on the right
    </div>
    <div class="col-xs-7 col-sm-pull-5">
       Content on the left
    </div>
</div>

Check out this JSFiddle demo for a visualization.

Answer №2

If you prefer having these elements stack on top of each other instead of being placed side by side as mentioned in the comments.
If you also want the second section to appear on top when stacked, you can achieve it like this. Use show and hide functions to switch between the two sections.
Check out this Fiddle where I've set the media breakpoints to 320px. 

<div class="row showhide1">
    <div class="col-xs-5 col-xs-push-7 col-sm-5 col-sm-push-7 col-md-5 col-md-push-7 bg-primary">
       This content will be displayed on the right in larger views
    </div>
    <div class="col-xs-7 col-xs-pull-5 col-sm-7 col-sm-pull-5 col-md-7 col-md-pull-5 bg-info">
       This content will be displayed on the left in larger views
    </div>
</div>

<div class="row showhide2">
    <div class="col-xs-12 bg-primary">
        Was on the right, now on the top in smaller views
    </div>
    <div class="col-xs-12 bg-info">
        This content will be shown on the left in smaller views

    </div>
</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

Guide on How to Show Only the Initial Word of an H2 Header Using JavaScript or CSS

Is there a way to display only the first word from an h2 heading? For instance: In the website's source code, it would appear like this <h2> Stackoverflow is an Ideal Place</h2> But on the live website, it should be displayed like this ...

javascripthtmlcss

passing a javascript variable to html

I am facing an issue with two files, filter.html and filter.js. The file filter.html contains a div with the id "test", while the file filter.js has a variable named "finishedHTML." My objective is to inject the content of "finishedHTML" into the test div ...

javascripthtmlcssvariables

Ensuring that your content spans the entire viewport is crucial for optimizing

https://gyazo.com/1440b13007c6e011ec46218ceecabb6a Upon examining the screenshot, it is evident that there is a white border surrounding the main content of the page. Despite my attempts to adjust everything to 100% width, I have not been success ...

htmlcss

Drop-down and autocomplete feature in Material UI design framework

Encountering an issue with aligning a label with a dropdown in material UI, and for some reason, this behavior is observed: Struggling to get them aligned on the same row. This is the code snippet of my component: const useStyles = makeStyles(theme => ...

cssreactjsmaterial-ui

Every time Tailwind compiles, it seems to generate a glitchy class

There was a time when I accidentally wrote 2 classes without a space max-w-[412px]mb-[36px]. This caused an error, so I added a space between the classes. However, the error persisted even after making this correction. In a last attempt to resolve the issu ...

cssreactjsnext.jstailwind-css

JavaScript influences CSS in EasySlider 1.7, creating a harmonious relationship between the

Struggling to achieve a captivating overlay effect with a slider using EasySlider 1.7, incorporating both images and corresponding text. However, encountering difficulties in aligning the text correctly on the page. The black overlay visible on the main s ...

jqueryhtmlcsseasyslider

Using Masonry with AngularJS templates: A step-by-step guide

Hey there! I'm trying to incorporate masonry into my AngularJS project. I'd like the divs to flow from left to right within their container. The documentation suggests using the following code: <div class="js-masonry" data-masonry-options=&ap ...

htmlcssangularjsjquery-masonry

Tips for incorporating scrolling into a sub menu

I'm currently attempting to incorporate vertical scroll only for my sub-menu using CSS, without including a horizontal scroll. However, the issue arises when I remove the horizontal scroll - it causes the nested sub-menu within the initial one to bre ...

htmlcsswordpressmenu

Exploring the benefits of utilizing Scoped CSS for individual components within Next.js version 13

Switching from a Vue.js background to starting with Next.js, I want to scope my CSS for each component such as Navbar instead of using it inside Globas.css. Is there a way to achieve this? I am also utilizing the Tailwind CSS library. I attempted creatin ...

cssreactjsnext.jsvuejs3next.js13

Dynamically adjusting the width of an HTML element with ng-style using percentage values in AngularJS

I am facing a challenge where I need to display a progress bar in my UI based on a percentage value stored in a JSON response object. Here is an example of the JSON object: { completionPercent: 42 } The desired UI outcome should look like this: ┌ ...

javascriptcssjsonangularjsdata-binding

The document.write function in JavaScript is malfunctioning

I've been attempting to utilize the javascript function document.write to incorporate an external css file in my template. However, I am aiming to achieve this using Twig, like so: document.write('<link href="{{ asset('bundles/activos/cs ...

javascripthtmlcsssymfonytwig

Place the border image underneath the div element

I successfully added a border image to the right side of my div, but now I want it to extend slightly below the div. Is there a way to increase the height of the border image? Or should I just float the image next to the div and how would I go about doing ...

htmlcssborder

How is the height and width of the header determined?

When examining the theme by clicking "inspect element" on the green portion (<header> ), you will notice that the height and width properties have pixel values that change dynamically as the window is resized. So, where do these values originate fr ...

csshtmltwitter-bootstraptwitter-bootstrap-3

Issues with CSS margins in IE causing bugs?

Currently dealing with a CSS issue that seems to be specific to Internet Explorer. I haven't encountered it in Firefox, Safari, or Opera during testing with IE 11. The problem: I've set the top margin of the website content/stage to around 2%, ...

cssinternet-explorermargin

Implementing a customized mobile style sheet for Google Maps v3

Currently, I am attempting to enforce the Mobile stylesheet for Google Maps v3 JavaScript within a jQueryMobile application. Within the screen stylesheet, the zoom control consistently stays in the top left corner and my efforts to relocate it have proven ...

cssjquery-mobilegoogle-maps-api-3

What are the placeholders for the "localIdentName" query tag in a custom CSS-loader for Webpack?

Just starting out with Webpack and experimenting with the css-loader. I came across the option to specify a localIdentName query tag on the Github page under "Local Scope". This tag allows us to define our own custom values for how classes should be named ...

javascriptcsswebpackloader

Is there a way to display two cards side by side in mobile view?

On a desktop view, 2 cards are displayed in a row. I would like them to also appear in a row on mobile view. I tried using col-sm-4 but it's not working. How can I get the cards to display in a row on mobile view so that I can see both the product pho ...

htmlcssbootstrap-4

On certain websites, the footer may appear distorted or incorrectly displayed when viewed in the IE 9 web browser

Currently experiencing an issue with the display of the footer in IE9. On some pages, the footer is not properly fixed and overlaps the middle of the content. However, this problem does not occur when using other web browsers. Here is the code that I am c ...

css

What is the best way to integrate my company's global styles CDN for development purposes into a Vue cli project using Webpack?

After attempting to import through the entry file (main.js)... import Vue from 'vue' import App from '@/App' import router from '@/router/router' import store from '@/store/store' import BootstrapVue from 'boot ...

csstwitter-bootstrapwebpackvue.jscdn

Difficulty with navigation on Chrome for Android (also impacting Bootstrap's website and all other sites utilizing Bootstrap design)

While working on creating a responsive website using Bootstrap, I encountered an unusual issue with navigation specifically in Chrome on Android. After some investigation, I found that the same problem exists on Bootstrap's own website. To see the i ...

jqueryhtmlcssgoogle-chrometwitter-bootstrap