The arrangement of bootstrap elements varies based on whether they are displayed in one or two columns

I'm facing a challenge with my webpage layout that displays two columns of cards. When the screen width is smaller than md size, I want the most important items to be positioned higher on the page. To achieve this, I have arranged the items alphabetically in two the columns (e.g., A - D).

<row>
   <div class="col-md">
      <item A>
      <item C>
   </div>
     <div class="col-md">
      <item B>
      <item D>
   </div>
</row>

On a two-column screen, the order appears as A, B, C, D.

However, when viewing in a single column, it first displays items from the first column and then moves to the second one, resulting in an order of A, C, B, D.

Since data goes in columns and columns should be structured in rows, I am unsure how to resolve this issue.

Attached are screenshots demonstrating the problem:

https://i.sstatic.net/NxhTA.png

https://i.sstatic.net/NcEJd.png

htmlcssbootstrap-4

Answer №1

It's possible that bootstrap may not be the best solution for this particular issue. Combining flex and column CSS could provide a better alternative in cases where all elements are siblings.

Here is a suggestion using a mix of bootstrap and custom classes for column CSS:

div div {
  border: solid;
  /* Customize as needed */
  margin: 2px;
  padding: 0.25em;
  break-inside: avoid; /* Works with column-count */
}

:first-line {
  font-weight: bold;
}

@media (min-width: 768px) {
  .column {
    column-count: 2
  }
  .gap-0 {
    column-gap: 0;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<p>Run snippet in full page, then resize window to see behavior while turning into columns</p>
<div class="d-md-block d-flex flex-column column gap-0">
  <div class="order-0">item A<br>line 2<br>line 3</div>
  <div class="order-2">item C<br>line 2<br>line 3</div>
  <div class="order-1"> item B<br>line 2</div>
  <div class="order-3">item D</div>
</div>

Answer №2

If you want to achieve the desired layout, one way to do it is by defining a complete row and then adding elements of another row below it. Here is an example:

    <div class="row">
        <div class="col">
            A
        </div>
        <div class="col">
            B
        </div>
    </div>
    <div class="row">
        <div class="col">
            C
        </div>
        <div class="col">
            D
        </div>
    </div>

By following this structure, you can achieve the effect you are looking for. For more information, you can visit: https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

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

How can I use jQuery to set the color of every other row in a

I'm facing an issue where I want to use jQuery to set the color of alternate rows in an HTML table. However, every time I add a new row, the color of the entire table switches. Below is the JavaScript code snippet that I am utilizing: var alternate = ...

javascriptjquerycsshtml-table

Position the div so that it is aligned with the top offset of another element

My question is straightforward. I have a div1 element with a variable offset().top that adjusts based on other elements on the page. I am looking to add an absolutely positioned div next to it, which should have the same absolute top value. This can be ach ...

javascriptjqueryhtmlcss

Conceal the page until it has completely finished loading

Similar Question: How can I delay displaying a webpage until it is fully loaded? I have a basic website and I want to delay its opening for X milliseconds to ensure that everything, such as images, is fully loaded. Is there a way to do this for the en ...

jqueryhtml

Assign a background image to a button using an element that is already present on the page

Is there a way to set the background-image of a button without using an image URL? I am hoping to use an element already in the DOM as the background-image to avoid fetching it again when the button is clicked. For example, caching a loading gif within the ...

javascriptjqueryhtmlcss

How to conceal table cells on Safari 5?

My code works on Firefox and IE, but not on Safari. Here's an example: <table> <thead> <tr> <th style="display: none;">hi</th> </tr> </thead> <tr class="someClass"> <td style= ...

htmlcsssafari

Head styles for tinyMCE

When viewing the tinyMCE example on the official website using Firefox, you may notice the editor blinking. This issue seems to only occur in Firefox, possibly due to external CSS files for the editor. I am considering adding all CSS rules directly into th ...

javascriptcssiframetinymce

How to Build a Custom Toolbar with Left and Right Aligned Elements using React.js and Material UI

Struggling with updating the toolbar on my website. Wanting the site name and logo on the left side, while login/sign-up buttons fixed to the right. Logo and title are in place, but can't get buttons to stay on right margin. Here's the code: func ...

javascripthtmlreactjsmaterial-ui

What could be the reason for the dropdown-item not being displayed?

I've encountered an issue with my navigation bar while using Bootstrap 5. The dropdown item (Login) for the user icon is not appearing as expected. Below is the code snippet in question: <button class="btn dropdown-toggle" type="butt ...

htmldropdownbootstrap-5

an occurrence of an element being rendered invisible, within an instance of an element being rendered as flexible,

I am trying to create a button that will show a list of elements. Within this list, there is another button that can be used to either close the list or hide it entirely. However, for some reason, my code is not functioning properly. let btn1 = documen ...

javascripthtmlcss

Creating a custom blockquote style for a WordPress Twenty Fifteen child theme

Currently, I am creating a new child theme for Twenty Fifteen completely from scratch. The one area I am struggling with is customizing the appearance of the blockquote using CSS. Here is an example of the custom CSS I have added to the blockquotes within ...

htmlcsswordpress

Addressing Image Issues in CSS Grid

I'm struggling to position two images in different sections of a grid layout without overlapping them. I've attempted referencing the images by both their class and id, but they continue to occupy the same grid space. Referencing the images by ...

htmlcss

Ways to enhance the appearance of the parent element when the radio button is clicked

Hey there! So, I have a situation where I'm working with two radio buttons and I want to apply certain CSS styles to the parent box (<div>) when a radio button is selected (checked). Here's how I want it to look: box-shadow: 0 0 5px #5cd05 ...

javascriptjqueryhtmlcss

Learn how to efficiently import scripts and styles from WordPress plugins with the help of the wp_enqueue_script function

After creating my own custom Wordpress theme, everything seemed to be running smoothly. However, I soon encountered an issue where certain plugins were not functioning properly with the theme. It seems that the theme is unable to import the necessary style ...

phpjquerycsswordpress

Enhancing a class's properties from its parent component using React

Recently, I decided to dive into React by taking on the challenge of rebuilding the Google Weather app. My main objective is to have the main section update whenever a day is selected. Initially, I believed that updating the props within handleSelectionAt( ...

javascripthtmlcssreactjs

managing the HTML class names and IDs for various functions such as styling, jQuery interactions, and Selenium automation

While there is an abundance of articles on writing clean HTML/CSS, one aspect that seems to be lacking advice is how to organize class names and IDs for different purposes such as design, jQuery, and Selenium testing. The challenge lies in deciphering the ...

javascriptjqueryhtmlcssselenium

Enhance link with dynamic content using an AJAX call

I need help appending a picture after a link with the same URL as the link. The current AJAX code is producing the following result: <a href="images/Draadloos.png" data-lightbox="gallerij"></a> Here is an example of what I would like to achie ...

javascripthtmlajax

Creating visuals from written content

I am attempting to transform Y[0] into an image rather than text. Currently, it is only displayed as a plain text link and not as an image. <html> <head> <script type="text/javascript"> function modifyContent(){ var rows=document.g ...

javascripthtml

Issue with making a call to retrieve an image from a different directory in ReactJS

This is how it appears <img className='imgclass' src={"../" + require(aLc.value)} alt='' key={aLc.value} /> I am trying to create a path like ../m/b/image.jpg, where aLc.value contains the path /m/b/image.jpg. I need to add only ...

javascripthtmlcssreactjswebpack

Optimal Strategy: Utilizing Spring Boot for Backend Development and jQuery for Frontend Interface

I am currently tackling a project that involves a Spring Boot 2 Backend and a jQuery Frontend. The frontend communicates with the backend by sending Ajax requests to Spring REST controllers in order to interact with database entities. One of the challenge ...

javascriptjavahtmljsonajax

A webpage layout featuring an HTML table enhanced with JavaScript functionality

Hi there, I'm new to Javascript and looking for a way to simplify my code. Is there a way to use a loop to change the id values in HTML without manually editing them one by one? Here's what I have so far: <table border="2" cellpadding="4"> ...

javascripthtml