Is there a way to organize nested columns/rows in Bootstrap without relying on numerous media queries or elements?

this is the structure of my webpage

HTML

<div class="container" style="padding-top:20px">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-12" style="height:80px">
          1st
        </div>
        <div class="col-md-12" style="height:50px">
          3rd
        </div>
        <div class="col-md-12" style="height:50px">
          5th
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col-md-12" style="height:50px">
          2nd
        </div>
        <div class="col-md-12" style="height:40px">
          4th
        </div>
        <div class="col-md-12" style="height:90px">
          6th
        </div>
      </div>
    </div>
  </div>
</div>

I've created a jsFiddle for this layout https://jsfiddle.net/ytke8mn3/

I have labeled these columns as 1st, 2nd, 3rd, 4th, 5th, 6th

The problem I encounter occurs when I resize the page to a width below 992px in Bootstrap.

I would like the columns to appear in the following order > 1st, 2nd, 3rd, 4th, 5th, 6th rather than 1st, 3rd, 5th, 2nd, 4th, 6th

How can I achieve this? Thank you

htmlcssbootstrap-4

Answer №1

I discovered a solution that perfectly aligned the elements for me and I am satisfied with the outcome so far. It did involve some restructuring of DOM elements, resulting in less code written, but that was not a problem.

<div class="container" style="padding-top:20px">
  <div class="row">
    <div class="col-md-8" style="height:80px">1st</div>
    <div class="col-md-4" style="height:40px">2nd</div>
    <div class="col-md-8" style="height:40px">3rd</div>
    <div class="col-md-4" style="height:80px">4th</div>
    <div class="col-md-8" style="height:80px">5th</div>
    <div class="col-md-4" style="height:30px">6th</div>
  </div>
</div>

https://github.com/desandro/masonry

Although I'm unsure of its implementation, it is indeed functioning as expected. Below is a JSFiddle demonstration:

https://jsfiddle.net/p5u976mt/

Answer №2

The col-md-8 and col-md-4 outer containers present a challenge when trying to rearrange content as desired, as outlined in the Bootstrap documentation.

One workaround could involve hiding the outer containers and displaying a separate container only for narrow device-widths containing the 6 elements in the correct order. While this approach is straightforward, it is considered bad practice due to code duplication.

Answer №3

It's a bit unclear what your specific needs are. You might want to consider using the following bootstrap framework in order to achieve the correct ordering. Check out this Fiddle

.row {
 background: #f8f9fa;
 }

 .row > div {
  border: solid 1px #6c757d;
  }

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

Achieve seamless transitions between animations when hovering with CSS3

I am facing an issue with an element that has a CSS3 animation. When the element is hovered over, the animation changes to another infinite one. While everything is functioning correctly, the transition between animations sometimes feels too abrupt and b ...

cssanimationcss-transitionscss-animations

Discover additional and subtract options

I am trying to implement a "See more" and "See less" button functionality for my list items inside an unordered list using the code below, but it is not working as intended. $(document).ready(function() { var list = $(".partners__ul li"); var numTo ...

javascriptjqueryhtml

PHP Algorithm - Duplicating items retrieved from MySQL query within a While Loop for each iteration

I'm struggling to understand the situation at hand. I have 3 tables - tag, post, and tag_post - all mapped out properly. On a page where posts are displayed, I first execute a query SELECT * from POST. Within the loop for these results, I then run an ...

phphtmlmysql

What is the best way to right-align a label in a vertical MUI Slider in ReactJS?

I am currently working with ReactJS/TS and MUI (Material-UI) to develop a vertical slider that requires the label to be positioned on the right side. By default, MUI places the label on the left for vertical sliders. I have reviewed the API documentation e ...

javascriptcssreactjsmaterial-ui

What is the reason behind the additional <td> tag being added by bootstrap 4 in this particular instance?

My current project involves using bootstrap along with PHP to tackle a coding challenge. The task at hand is to generate a table displaying city populations. However, I am facing an issue where an extra <td> tag is appearing at the bottom of my table ...

phpbootstrap-4

Unexpected output from nested loop implementation

Having some arrays, I am now trying to iterate through all tab names and exclude the values present in the exclusion list. json1 ={ "sku Brand": "abc", "strngth": "ALL", "area ...

javascripthtmljquerytypescript

A problem arose with Vitest when attempting to call the tRPC createCaller function due to the presence of incorrect JS syntax within the content. To resolve this issue, it is recommended to include

Currently, I am in the process of writing unit tests with Vitest and utilizing the tRPC createCaller to simulate the trpc context. However, I am encountering a failure during testing which presents the following error message: Error: Failed to parse sourc ...

htmlnext.jsmockingvitesttrpc

How can jQuery be used to dynamically update a checkbox value based on a radio field selection?

The objective is to update the checkbox fields to TRUE or FALSE based on the radio button selection. If FALSE is selected, the checkboxes should be unchecked. I am only successful in checking the checkboxes when TRUE is selected. Could this be because I h ...

javascriptjqueryhtmlcheckbox

Tips for selecting array [0] and turning it into a clickable link with JavaScript

My challenge lies in redirecting to a different URL when the user clicks on <a href="javascript:void(0)">Hotel Selection</a>. Below is my current progress. Grateful for any assistance! <div id="menu"> <ul> <li class= ...

javascriptjqueryhtml

Guide to integrating Bootstrap classes with Vue-Formulate

As per the information provided on Vue Formulate, you have the option to incorporate Bootstrap into it: By utilizing the class props available, you can apply your own collection of style classes globally or as needed. Want to use Tailwind? No issues. ...

bootstrap-4vuejs2vue-formulate

Troubleshooting: Unresponsive behavior of CSS table

I have been working on implementing responsive CSS for a table. I recently came across a helpful tutorial on http://css-tricks.com/responsive-data-tables/ (How to create a responsive table using CSS). While the tutorial worked fine on some sample pages, I ...

htmlcssresponsive-design

Exploring the options available for setting types in Angular-formly

While using setType to create a new type in angular-formly, how can I show the options in the template? I am trying to create a type called "category" that will display the label on the webpage. How can I retrieve the label name? This is what my code loo ...

javascripthtmlangularjsangular-formly

Troubleshooting z-index issue in HTML5 video when in full screen mode

Having some trouble with HTML5 video on a non-app mobile page. I've added text over the video using an overlay div. It works fine in normal mode, but the z-index doesn't seem to work when the video is in full-screen mode. I've been strugglin ...

htmlcssvideoz-index

Issue with locating JavaScript controller in Angular HTML file [Node.js/Angular]

Here are all the files and folders in my project located within the same directory. If you want to check out the project on Github, you can find it here: https://github.com/JohnsCurry/learnAngular. Just to confirm, they are all in the same folder. Unfortu ...

javascripthtmlangularjsnode.js

preferring images to be positioned side by side rather than stacked underneath each other

I am facing a challenge in arranging the images on my Tumblr site to display side by side instead of stacking one on top of the other. Despite multiple attempts at following advice from various forums, I have been unsuccessful in achieving the desired layo ...

html

Tabs within the AutoComplete popup in Material-UI

Would it be feasible to showcase the corresponding data in the AutoComplete popover using Tabs? There could be potentially up to three categories of data that match the input value, and my preference would be to present them as tabs. Is there a way to in ...

javascripthtmlreactjsmaterial-ui

What methods can I use to ensure my images are optimized for mobile users?

I have gone through several other discussions related to this issue, but none of the suggested solutions are working for me. Even with max-width: 100% and height: auto, the images remain unresponsive. They appear fine on browsers like IE, FF, and Chrome on ...

htmlcssimagemobileresponsive

Is there a way to achieve this specific function using div elements instead of relying on tables, rows, and cells?

To achieve the same behavior as the example code, one can remove the use of the table, td, and tr tags and replace them with divs. The desired behaviors include: Content1 text wrapping within column1 when the page width decreases. Column2 having a minimu ...

htmlcss

Implement a JavaScript function that toggles the visibility of a div based on changes to an anchor tag

My objective is to have the lds-roller div only displayed when the text within the anchor tag with the ID of searchFor is equal to _. This change in text should occur with an HTTP response. <div class="lds-roller"><div></div><div> ...

javascriptjqueryhtmlcss

Choosing a specific column in an HTML table using jQuery based on the text within it

I have a table with a similar structure as shown below: <table> <c:forEach ...> <tr> <td>test</td> // this is the initial value <td>random value</td> <td>random value</td&g ...

javascriptjqueryhtml