Tips for rearranging elements with bootstrap 4:

In my project, I have a section where I am trying to display nested elements using bootstrap for a more organized layout.

Here is the current HTML code:

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>

This code displays the elements in a specific order on desktop, which is not what I want. I am looking to rearrange them like this:

  --------- ---
    |  1  | | 2 |
    |     | |   |
    ------- |   |
    |  3  | |   |
    |     | |   |
    ------- |   |
            -----

For the mobile version, I want them stacked in order like this:

 --------
    |  1   |
    |      |
    --------
    |  2   |
    |      |
    |      |
    |      |
    |      |
    |      |
    --------
    |  3   |
    |      |
    --------

I attempted to use float-right but it did not give me the desired result. Can anyone advise on how to achieve the desired layout?

htmlcssbootstrap-4

Answer №1

To achieve the desired layout, simply position your larger column (2nd) between the other columns (1st and 3rd) so they stack on top of each other. The larger column (2nd) will automatically take up the available space. Here is a code snippet that you can expand to full screen to observe the expected behavior or view on smaller devices:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row d-flex d-lg-block">
    <div class="col-lg-4 order-0 float-left">
      <div class="card card-body">1</div>
    </div>
    <div class="col-lg-8 order-1 float-left">
      <div class="card card-body tall">2</div>
    </div>
    <div class="col-lg-4 order-1 float-left">
      <div class="card card-body">3</div>
    </div>
  </div>
</div>

Answer №2

To eliminate the extra space caused by the third element, rather than the first one, you can apply margin-top: -50px; in your CSS. Incorporate this style rule into your code and make use of media queries to adjust it based on your specified break-point.

https://i.sstatic.net/2qao0.png

<style>
.item-3{
margin-top:-50px;
}

@media screen and (max-width: 991px) { 
.item-3{
margin-top: 0px;
}
 }

</style>
<div class="container">
  <div class="row d-flex d-lg-block">
    <div class="col-lg-4 order-0 float-left">
      <div class="card card-body">1</div>
    </div>
    <div class="col-lg-8 order-1 float-left">
      <div class="card card-body tall">2</div>
    </div>
    <div class="col-lg-4 order-1 float-left item-3">
      <div class="card card-body">3</div>
    </div>
  </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

Is the practice of using data:text/css considered legitimate?

Looking to insert 3 CSS rules into the head tag by using <link /> tags. $('head').append('<link rel="stylesheet" href="data:text/css, .rule0 {} .rule1 {} .rule2 {}" />'); Would this syntax be considered valid? I am aware ...

jquerycsshtmluser-experiencedata-uri

An improved method for filling in the choices within a datalist

In my Flask application, I have a datalist with a total of 3360 options. This list is used in an input field where a user can search for port names and see matching options in a dropdown. The current setup is causing some lag, so I am exploring the possi ...

javascriptpythonhtmljsonflask

Fixed-positioned left column in a styled table

Struggling to implement the solution provided in this popular topic on Stack Overflow about creating an HTML table with a fixed left column and scrollable body. The issue arises from my use of the thead and tbody tags, which are not addressed in the exampl ...

htmlcss

Automatically adjust column sizes using Bootstrap's responsive width feature

While I have a feeling this question might have been asked before, my search has turned up no similar issues. I am currently working on styling a menu bar using a standard bootstrap row and columns setup (flexbox). The menu is dynamically generated by Wor ...

htmlcssbootstrap-4flexboxflexboxgrid

Show the attribute of an element in a pop-up window

I have a modal from ngx-bootstrap that I want to display in there a property of my object let's say the name: public students = [ { id: 1, name: 'lorem'} In this button that is common for all entries in the table (each row has this butt ...

htmlangulartypescript

Guide on filling MySQL database with audio HTML pages

Looking for some assistance with uploading 4,000 small audio files (approximately 30 seconds each) - they're not ringtones! Additionally, I have 4,000 HTML files to manage too. I've heard that MySQL is the ideal solution for handling large amount ...

mysqlhtmltemplatesaudio

How can I design an SVG page similar to Coin360 and Market Maps?

I need to design a homepage similar to coin360.com, where I can display market maps and cryptocurrency rates. This page will be created using SVG elements for the answers section. Is there a pre-made template available for this design, or can someone gui ...

javascripthtmlcsssvgsections

Troubleshooting the Next.js OG image meta tag issue

<meta property="og:image" content="https://mywebsite.com/images/s1.jpg" After utilizing next/head and inserting the meta tag image above, I encountered an issue where the image did not display when the link was shared. Any suggestio ...

htmlnext.jsmeta-tags

Looking to add a glowing effect to a div when hovered using jQuery

Seeking assistance to add a glow effect to a div when hovered using jQuery. Below is the code snippet: HTML <div class="tablerow"> <div class="image"> <img src="1.jpg"> </div> <div class="info"> ...

jqueryhtmlcss

attempting to extract text from a span element nested within an a-tag

<li class="ft_lt"> <a href="javascript:void(0);" class="active">Properties<span itemprop="name">(64236)</span></a> <li> In this code snippet, the text inside the span tag containing the number (64236) is what I am looki ...

htmlbeautifulsoup

Bootstrap navbar does not appear on smaller devices due to a display issue

This particular navigation bar, featuring a logo image in the center, functions well on larger screens. However, when viewed on smaller screens, everything disappears, including the logo image, and the hamburger menu icon fails to display. Is there a solut ...

htmlcsstwitter-bootstrapnavbarbootstrap-4

What are some strategies for efficiently positioning buttons using CSS to prevent unwanted consequences?

Below is the CSS and HTML code, detailing a specific issue. * { box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; } body { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; } .topn ...

htmlcssbutton

Disabling directional focus navigation in CSS: A comprehensive guide

Is there a way to disable directional focus navigation properties, such as 'nav-up', 'nav-right', 'nav-down', 'nav-left', for elements on an HTML page? button { position:absolute } button#b1 { top:0; left:50%; ...

htmlcss

How can ListSubheader in Material-UI be customized to match the style of iOS UITableView?

Here is the current appearance of my ListSubheader. https://i.stack.imgur.com/HAzTA.png Currently, it is just aligned to the left. However, the default header view in UITableView on iOS looks like this: https://i.stack.imgur.com/F9Amv.png It features ...

ioscssuitableviewmaterial-ui

Express-minify is having trouble loading the CSS file. If we remove a portion of the file, it should be able

After implementing the express-minify middleware, I encountered an issue with loading the attached CSS file. Even after validating the CSS using an online service, no errors were detected. I attempted to debug by gradually removing elements, and the prob ...

node.jscssexpressminify

Ways to prevent the TAB key from automatically shifting focus to the next element after using scrollIntoView during page initialization in the Chrome browser

Encountering a strange issue specifically on the Chrome browser. After the page loads, I am using the scrollIntoView method in the ngAfterViewInit of an Angular component. When the page loads and scrolls to the element, everything appears to be functioning ...

javascripthtmlangulargoogle-chromejs-scrollintoview

The process of displaying a single large image from a local file system using the elements input, img, and canvas

I am attempting to create a mobile-friendly picture upload webpage, but I keep experiencing memory issues causing the browser to crash when the picture is too large. Here's my code: <input type="file" id="testFile" /> <img src="" style="posi ...

imagehtmlinputbase64filereader

What is causing the .sr-only class to malfunction in Bootstrap 5?

Currently, I am working on creating a one-page form using Bootstrap 5: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge& ...

htmlcsstwitter-bootstrapaccessibilitybootstrap-5

iOS now supports PowerPoint presentations through the use of the .pptx file format

Attempting to incorporate a pptx presentation with videos and animations into an iOS native app has proved challenging. Although UIWebView successfully renders the presentation allowing for slide browsing, it lacks interactivity such as button clicks that ...

ioshtmluiwebviewpowerpoint

Ways to adjust the height of one panel based on the height of surrounding panels

I have a layout with three panels: two on the left side and one on the right. <div class="row"> <div class="col s6"> <div class="panel"> content1 </div> <div class="panel"> ...

javascriptcsspanelmaterialize