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

Using a Do/While loop in combination with the setTimeout function to create an infinite loop

Having trouble with this script. The opacity transition works fine, but there seems to be an issue with the loop causing it to run indefinitely. My goal is to change the z-index once the opacity reaches 0. HTML <div class="ribbon_services_body" id="ri ...

javascriptcssdo-while

Failed attempt to change background color using jQuery

Creating a new notification system where I need to highlight a specific comment once it has been scrolled to. I initially thought of implementing a background color change timeout, but I'm facing some issues with it... Check out this example: I hav ...

javascriptjquerycss

The AngularJS Navbar is Bootstrapped

I'm currently working on a project where I need to make a bootstrap navbar show and hide html elements based on data retrieved from an angular controller. Below is the jade code snippet: div.navbar.navbar-fixed-top div.navbar-inner div.c ...

javascripttwitter-bootstrapangularjspugnavbar

Organizing the website's files and extensions

Transitioning from programming desktop applications to websites can be overwhelming, especially when dealing with multiple languages and extensions like JavaScript, CSS, JSON, Bootstrap, Ajax, and PHP all at once. How do you effectively juggle these diff ...

javascripthtmlcssweb

What is the best method for accessing and showcasing images in an ionic app?

Having trouble displaying images after executing the following command: ionic run ios The default ionicframework template is being used with the sidemenu, and no changes have been made to the app directory structure. An inline css is being used to speci ...

htmlcssangularjsionic-framework

Positioning a fixed div within a responsive div using AngularJS and Bootstrap

I'm currently working on a page layout that consists of a fixed sidebar on the left side and a main container taking up the rest of the page on the right. Inside this right-side container, which is a div, there are 2 elements. <div class="col-sm-1 ...

htmlcssangularjstwitter-bootstrap

A method to ensure that inline <div> elements occupy the entire available width

The typical solution for this issue is using float, however, it does not work in my situation. I attempted to utilize flexbox and overflow:hidden for the parent element, but unfortunately, it did not resolve the issue. Currently, I am dealing with three i ...

htmlcss

Bootstrap 4 Nav Table of Contents with Expand and Collapse Feature

Currently, I am encountering an issue with implementing a button to expand and collapse a "table of contents" in Bootstrap 4. The code I have so far can be viewed here: https://codepen.io/nht910/pen/RwwwyKB Code Snippet: <div class="main-wrapper col- ...

javascripthtmlcsstwitter-bootstrap

The global CSS styles in Angular are not being applied to other components as expected

Currently utilizing Angular v10, I have a set of CSS styles that are meant to be used across the entire application. To achieve this, I added them to our global styles.css file. However, I'm encountering an issue where the CSS is not being applied to ...

javascripthtmlcssangulartypescript

Modifying CSS Styles using JQuery

I've been attempting to use JQuery to change a CSS property without success, despite trying multiple solutions found on SO. Here's what I've attempted (with numberHours being a previously defined variable): $(".cd-schedule .events .top-inf ...

jquerycss

What is the best way to add a line break to a menu item?

Looking for some assistance with Angular Material here. I am trying to design a menu that includes an item with two lengthy paragraphs, but the text is getting truncated and only showing the first paragraph. If anyone could offer guidance or help, it woul ...

htmlcssangularangular-materialmenuitem

Script for converting Fixed Positioned Elements to Static

I am frequently finding that elements on web pages are causing disruptions due to their fixed positioning. I am exploring ways to disable the position: fixed CSS rules on any website I visit. To address this issue, I have developed a userscript specifical ...

javascriptcssfirefoxgreasemonkey

Parallax Effect Slows Down When Scrolling In Web Page

Currently in the process of creating a website with a scrolling parallax effect using Stellar.js on the header and three other sections. However, I'm experiencing lag when scrolling, especially at the top of the page. I've attempted to reduce la ...

javascriptjqueryhtmlcssparallax

The functionality of jQuery on hover is not compatible with Bootstrap tree view

My issue arises when the jQuery onhover function does not trigger the anonymous function as expected. Here is my current HTML structure: $(document).ready(function () { $.ajax({ url: "fetch.php", method: "POST", ...

jqueryajaxtwitter-bootstrap

Add a unique design to a list element with CSS

I've successfully arranged a simple list in a line with a background image for all items. However, I want to have a different background image for specific list items (List item 3) without resorting to using !important. Below is the code I am currentl ...

htmlcss

Tips for avoiding the influence of the parent div's opacity on child divs within a Primeng Carousel

I'm struggling to find a solution to stop the "opacity" effect of the parent container from affecting the child containers. In my code, I want the opacity not to impact the buttons within the elements. I have tried using "radial-gradient" for multipl ...

javascripthtmlcssangulartypescript

Why are XAxis categories appearing as undefined in tooltip when clicked?

[When clicking on the x-axis, the values go from 0 to 1. I need the x-axis categories values to display on click event. When hovering over the x-axis value, it shows properly, but clicking on the x-axis does not show the correct values] Check out this fid ...

javascriptjquerycsshighcharts

Is it possible to load images top to bottom?

Is there a way to make browsers load images from the bottom to the top? Imagine I have an extremely long image that takes 60 seconds to load. The content is designed to be read from bottom to top. Is there any trick I can use to ensure that the image load ...

javascripthtmlcssbrowserimage-loading

What is the best way to paste plain text into a Textarea without any formatting?

A challenge I am facing in my project is related to copying and pasting text into a Textarea. When a user copies text, the style of the text is also inserted along with it. However, when the user manually types the text, it gets inserted correctly without ...

htmlcssreactjs

Dealing with a jQuery/JavaScript issue involving thumbnail images

I am facing an issue with smooth transitions between thumbnail images in HTML list tags. I have Jquery listeners set up for mouseenter and mouseleave events that update a parent image when a thumbnail is hovered over. The problem arises when scrolling fro ...

javascriptjquerycsspaddingmargin