What is the best way to rearrange Bootstrap columns for mobile devices?

I have 4 columns displayed like this on desktop, and I want them to rearrange to look like the following on mobile. Do I need custom CSS for this?

(I can't post images yet, so here is the link to the image: https://i.sstatic.net/b0gUZ.jpg

I've attempted putting them in parent columns of two each, but it hasn't worked out. I specialize in backend development, so frontend tasks are not my forte.

Current HTML:

<div class="row">
  <div class="col-md-6 col-sm-12">
    <div>A</div>
    <div>C</div>
  </div>
  <div class="col-md-6 col-sm-12">
    <div>B</div>
    <div>D</div>
  </div>
</div>

I want it to look like how I've shown in the image.

How can I achieve this without using JavaScript? Any guidance would be appreciated.

Thank you.

cssbootstrap-4less

Answer №1

When manipulating your html structure, there is no need to rely on custom css. Simply make adjustments to classes and content within your code like this:

<div>
    <div class="row">
        <div  class="col-md-6 col-sm-12">X</div>
        <div  class="col-md-6 col-sm-12">Y</div>
     </div>
     <div class="row" >
        <div class="col-md-6 col-sm-12">Z</div>
        <div class="col-md-6 col-sm-12">W</div>
     </div>
</div>

Answer №2

This code snippet demonstrates how to create a responsive layout using Bootstrap:

<section>
    <div class="container my-5">
      <div class="row">
        <div class="col-md-6">A</div>
        <div class="col-md-6">B</div>
      </div>
      <div class="row">
        <div class="col-md-6">c</div>
        <div class="col-md-6">d</div>
      </div>
    </div>

  </section>

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

Include an additional icon without replacing the existing one on the mouse cursor

I am looking for a way to enhance the user experience by adding an icon that appears when hovering over an HTML element, serving as a subtle hint that the user can right-click. Instead of replacing the default cursor, which varies across platforms and doe ...

javascripthtmlcss

Ways to include text underneath icons using HTML and CSS

Seeking guidance on how to display text below icons on my website. Can someone please provide instructions? <div class="bottom-bar div-only-mobile" style="position: fixed; bottom: 0; width:100%"> <a href="Dashboard"> <ion-icon name= ...

htmlcssresponsive

ng-deep is causing changes in sibling components

Facing a challenge with Angular Material Design as I discovered the need to utilize ng-deep to customize the styling of an accordion. The issue is that when I use this method, it affects another accordion in a different section which is undesirable. Is th ...

cssangularangular-materialangular7

What is the best way to create a header similar to the one in the image using only CSS

Wondering if it's possible to create a header like the one in the image using just pure CSS and without Photoshop. How can I design it in a professional manner? You can view an example of the image here. ...

htmlcss

Is there a way to align my anchor tag so that my link appears perfectly centered both vertically and horizontally on the page?

Despite my efforts to find a solution, I am stuck with this issue. Here is the code I have been working on: <a href='/Customers' class='centre'>Start</a> I attempted to wrap it in a div tag and also wanted to add a small gr ...

htmlcssreactjs

What steps can I take to ensure the proper formatting of the `select` input on Mac OS?

How can I maintain consistent formatting for my form across different operating systems? Currently, the form looks good on Windows, but I want to ensure that the select input appears consistently on Mac OS, iOS, and Android devices as well. The image bel ...

htmlcssmacosdrop-down-menucross-browser

Discover more in React about using ellipses (...) with dangerouslySetInnerHTML

What is the best method for limiting the number of HTML lines retrieved using dangerouslySetInnerHTML in a React application and creating a '... Read More' expander for it? I attempted to use react-lines-ellipsis, but unfortunately the 'tex ...

htmlcssreactjsnpmellipsis

Tips for designating all content within a <div> element to open in a blank target (target="_blank")

I am looking to open all content within a specific <div> in a new tab (target="_blank"). I am open to any solution, whether it involves JS, CSS, HTML, classes, IDs, etc. I experimented with using <base target="_blank">, but it affect ...

javascripthtmlcsstarget

The footer is displaying unusual white space beneath it

Recently, I attempted to create a sticky footer using Flexboxes and the <Grid container> Check out the code on Codesandbox However, an issue arose - there was a strange whitespace below the footer. https://i.sstatic.net/2YdaJ.png After some exper ...

htmlcssreactjsmaterial-ui

Conceal an element along with its space, then signal the application to show alternative content using React

Greetings everyone! I seek assistance with a React Application that I am currently developing. As a newcomer to the Javascript world, I apologize if my inquiry seems trivial. The application comprises of two main elements: a loader, implemented as a React ...

javascripthtmlcssnode.jsreactjs

Utilizing mat dialog in conjunction with the bootstrap sticky top class to enhance functionality

I am encountering an issue where, upon clicking to delete an entry, a mat dialog should appear with everything else in the background greyed out. However, the problem I am facing is that when I attempt to delete an entry, the dialog appears but the sticky ...

htmlcssangularangular-materialbootstrap-5

"Troubleshooting: Why is my Bootstrap modal window only printing a

I've encountered an issue with printing the content of a Bootstrap modal window. Previously, the code I had was working fine but now it seems to be malfunctioning. Content is dynamically added to the form using appendChild() in a separate function. Ho ...

javascriptjqueryhtmlcssbootstrap-4

Flex columns with flex items of equal height

I am attempting to create a layout where list items within a column have equal heights. Below is my current code: <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> ol { ...

htmlcssflexbox

Using jQuery to delay hiding for 2 seconds

Hey there! I'm facing an issue with my code. The function is supposed to make #aboutPopOut slide to the left, and then after a 2-second delay, fade out the fadescreen by hiding it. The sliding part works fine, but the waiting and hiding do not seem to ...

javascriptjqueryhtmlcssweb

`Certain browsers are experiencing issues with text overlay functionality.`

I have managed to successfully create the necessary code to incorporate an image with a child element containing text overlaying the image. However, this functionality does not appear to be working on Internet Explorer (IE), and I am struggling to find a C ...

htmlcssinternet-explorerbootstrap-4

What could be causing my randomly generated value to be overwritten so quickly?

I'm encountering an issue with my code. I am attempting to generate objects in random locations using drawHyperBall(), getRandomIntX(), and getRandomIntY(). However, the random value seems to be constantly overwritten. How can I resolve this problem? ...

javascriptcss

What is the proper way to encode image URLs for use in CSS?

For the div element in my code, I want to allow users to input a URL that will be applied as a CSS background image, like this: background-image: url("/* user specified URL here*/") I'm concerned about security. How can I properly escape the URL to ...

cssurlescapingxss

Surprising automatic scrolling upon pressing the keydown button in Bootstrap

My webpage appears normal with the Bootstrap framework, but whenever I press the down key, the screen scrolls down and displays unexpected white space due to reaching the end of the background-image sized at 1798px * 1080px. Please refer to the image: htt ...

javascriptjqueryhtmlcsstwitter-bootstrap

Safari browser experiencing issues with JQuery Slider functionality

I am facing an issue with a slider that works perfectly in all browsers except Safari. I have been struggling to figure out the root cause of this problem. You can view the fiddler code here: http://jsfiddle.net/sjramsay/UyvvL/ It appears that when the co ...

jquerycssslider

able to move through the content without displaying the scrollbar

I am looking to keep my content able to scroll, but I don't want the scrollbar to be visible. I have written my CSS like this: #content-three{ width:100%; height:100%; position:relative; overflow:hidden; } .block_s{ width:90%; ...

javascriptjqueryhtmlcss