Utilize Bootstrap to reposition nested columns within a separate row with the push/pull effect

I'm a newcomer to Bootstrap and am embarking on the journey of creating a responsive website. I've been facing some challenges with the Bootstrap Grid system particularly when it comes to arranging columns for different screen sizes.

Below, you'll find the "grid" setup that's currently in place (and hopefully valid). My main issue arises when the site is viewed on a tablet or phone - at that point, I wish for the column "----2B----" to be pushed down below the column "----1C----". Despite my attempts at push/pulling the column, I haven't been successful in achieving this outcome.

Could it be that I have set up everything incorrectly, or is there a way to make this happen?

<div class="row center-block rounded-div white">
    <div class="col-md-6 col-md-push-6 col-lg-5 col-lg-push-7">
        <div class="row">
            <div class="col-lg-12">
                -----1A-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1C-----
            </div>
        </div>
    </div>

    <div class="col-md-6 col-md-pull-6 col-lg-7 col-lg-pull-5">
        <div class="row">
            <div class="col-lg-12">
                -----2A-----
            </div>
    </div>
        <div class="row">
            <div class="col-lg-12">
                -----2B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2C-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2D-----
            </div>
        </div>

    </div>
</div>

I've even tried to sketch out what I envision achieving as the final result:

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

The current order of your columns is causing an issue. You may want to consider using jQuery swapping, such as 

$('element1').before($('element2'))

For example:

$(document).ready(function() {
     $('.a2').before($('.b2'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row center-block rounded-div white">
    <div class="col-md-6 col-md-push-6 col-lg-5 col-lg-push-7">
        <div class="row">
            <div class="col-lg-12">
                -----1A-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1C-----
            </div>
        </div>
    </div>

    <div class="col-md-6 col-md-pull-6 col-lg-7 col-lg-pull-5">
        <div class="row a2">
            <div class="col-lg-12">
                -----2A-----
            </div>
    </div>
        <div class="row b2">
            <div class="col-lg-12">
                -----2B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2C-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2D-----
            </div>
        </div>

    </div>
</div>

Answer №2

Struggling with the HTML structure? No worries, I have a solution for you - consider using visible control classes.

<div class="row">
    <div class="col-lg-12">
        -----1C-----
    </div>
    <div class="visible-xs-12">
        -----2B----- <!-this only visible on extra small devices with column 12 ->
    </div>
</div>

For more information, check out: http://getbootstrap.com/css/#responsive-utilities

Answer №3

Utilizing Bootstrap, this layout is as close as you can get to achieving the desired design. However, it may not display correctly in a reverse order on mobile devices, and the column positioning can be affected by the neighboring columns' height.

<div class="row">
    <div class="col-xs-12 col-md-6 col-md-push-6">
        <div class="row">
            <div class="col-xs-12 col-md-12"><div class="well xtall">b1</div></div>
            <div class="col-xs-12 col-md-12"><div class="well">b2</div></div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6 col-md-pull-6">
        <div class="row">
            <div class="col-xs-12 col-md-12"><div class="well tall">a1</div></div>
            <div class="col-xs-12 col-md-12"><div class="well tall">a2</div></div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6">
        <div class="row">
            <div class="col-xs-12 col-md-12"><div class="well tall">a4</div></div>
            <div class="col-xs-12 col-md-12"><div class="well">a3</div></div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6"><div class="well tall">b3</div></div>
    <div class="col-xs-12 col-md-6"><div class="well">a5</div></div>
  </div>

http://codeply.com/go/XCTc3U4bWh

In Bootstrap 4, it is possible to rearrange full-width (12 units) columns as needed.

For more information, check out: Change the order of col-*-12 columns in Bootstrap 3 by using push/pull

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 displaying cards with responsive design utilizing Bootstrap 5

How can I display cards responsively for mobile, desktop, and iPad? My goal is to have: - One column for mobile - Two columns for iPad - Four columns for desktop The current code only works for mobile and desktop, not for iPad. On my iPad, it's sh ...

cssresponsive-designbootstrap-5

Guide to customizing text color within QTextEdit

Although I have been hesitant to ask what may seem like a beginner question, all of my recent attempts at completing this task have been unsuccessful. Despite trying various methods, none have produced the desired result. Could it be that OpenSuse 11.3 app ...

c++cssqtqtextedit

What are some more efficient methods for implementing page location detection with Angular directives?

My website currently features a navigation bar with 4 anchor links that direct users to different sections of the page. As you scroll down the page, the corresponding link on the nav bar lights up to signify your position on the site. Experience it yourse ...

javascriptjqueryhtmlcssangularjs

Is Sass only compatible with Ubuntu for monitoring once?

After successfully installing Sass on Ubuntu, I ran the command sass --watch scss:css and it worked perfectly. However, now I have to manually run this command every time I make changes to my code. It seems like it only works once. Can someone please ass ...

javascripthtmlcsssasswatch

Insert an icon at the conclusion of a truncated multi-line text without causing a line break

I have a specific requirement where I am looking to present two lines of text, followed by an icon displayed through an img tag. If the text exceeds two lines, I want to display an ellipsis. However, it is crucial that the icon remains inline with the text ...

javascriptcss

What is the best way to center-align the label of a TextField in React Material-UI horizontally?

I'm trying to center-align the label in this TextField: import React from "react"; import { withStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; export ...

cssreactjsmaterial-ui

Having trouble getting the vertical menu animation to work with jQuery

Essentially, I am facing an issue with a <nav> element that is supposed to expand from left to right upon mouseover. However, sometimes when quickly moving the cursor over and then out of the element, it expands without animation, which should not be ...

jqueryhtmlcsstwitter-bootstrapjquery-animate

What are some ways to apply selector combinators to hashed CSS module classes?

Seeking advice on overriding a style in a CSS module for a third-party datepicker component used within a custom component. The challenge lies in targeting the correct element with a selector combinator, complicated by the dynamic creation of class names i ...

css

Line 1: Position a section of the content on the initial line.Line 2: Then place the remainder

Within a paragraph element on WordPress, I have a value displayed using ACF. The paragraph is contained within a div with a maximum width and centered text alignment. I am seeking a solution that will allow me to achieve the following: "If the default d ...

javascriptjqueryhtmlcss

Maneiras de diminuir a margem das páginas utilizando CSS e trocar estilos de observação com um tema diferente

Looking for some assistance with a CSS override on the Remark theme to reduce page side spacing. Any tips? Project: Asp.net Core MVC. Thanks :) Remark image 1 image 2 //Page Code snippet here... ...

htmlcssasp.net-mvclayout

Tips for making a div overlap with Twitter Bootstrap positioning

Currently, I am attempting to utilize Bootstrap 4.5 to position a div over two existing divs. Instead of explaining it through text, the image linked below provides a visual representation of what I am aiming for: https://i.sstatic.net/gbylW.png In this ...

htmlcsstwitter-bootstrap

Tips for assigning array variables to elements in querySelectorAll [Pure JavaScript]

I need help with assigning values from an array to elements selected by the querySelectorAll function. I am trying to write code that will change the text to different values in the array when the browser width is below 768px, but I'm facing some chal ...

javascriptcssarrays

Reimagining scrolling through content with a stylish unordered list (a sleek alternative to a select box

After having our company website redesigned by a professional designer, our site now looks much more visually appealing. However, I have encountered difficulties when trying to implement their design using HTML and CSS. One particular challenge is the heav ...

javascripthtmlcssselectdrop-down-menu

Troubleshooting problem with Bootstrap file input on deployment

Having an issue with the Bootstrap file input package - it's working fine locally, but failing on production. Here is how it looks in VS And after deployment I've read that the problem might be with the js files not loading correctly, but I ha ...

javascriptjqueryasp.nettwitter-bootstrapiis

What is the best way to vertically align two divs on the left and right?

Having trouble aligning my dropdown list vertically with my textarea on the left. It seems like they are clashing together for some reason. UPDATE: Thank you for the assistance, I was able to make the necessary adjustments. JSP: .ExeDropdown{ float: ...

htmlcssjsp

Can I restrict the translation of the educational institution's name on my website into a different language?

As I develop a website for a training facility, I have encountered an issue with the translated versions of the site. The training center's name is in English, and when the site is translated into another language, it alters the appearance of the name ...

javascripthtmlcss

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Wouldn't it be cool to have a magic line that follows your mouse as you navigate through the header menu? Take a look at this example: It works seamlessly and smoothly. I tried implementing a similar jQuery script myself, but it's not as smoot ...

javascriptjqueryhtmlcss

Issues with loading CSS, JavaScript, and links when deploying a Spring Boot application as a WAR file in Tomcat

My Spring boot web application runs smoothly as an executable jar, but when I build it as a war and deploy it to Tomcat, the CSS and JS files fail to load. Upon further investigation, I discovered that all links are pointing to the root context path "/" I ...

javahtmlcssspringspring-boot

Centralized logo and slogan with Bootstrap 4 in navigation collapse

I am currently working on a Bootstrap 4 project that involves a navigation bar with a centered logo and tagline, along with links positioned to the left and right. While the setup is close to what I want, my ideal scenario would be for the logo to remain c ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

What is the best method to transfer this logo to my header without affecting the title's placement?

I'm currently working on a website and I am trying to figure out how to position the title and logo in the header. Ideally, I want the title to be centered and the logo to be on the left. However, I've encountered an issue where the title is cau ...

htmlcss