Is there a way to transfer an element from one row to another using Bootstrap?

Can the grid layout transition smoothly from a desktop view to a mobile view using Bootstrap 4 or pure CSS flex classes?

Desktop view:

Mobile view :

Currently, I have a solution in place but I want to avoid repeating content in two different places. Is there a way to achieve this without duplication?

<div class="container">
<main class="row">
    <section class="col-lg-8 screen"gt;
        <div class="row my-contracts justify-content-around">
            <div class="col-12">
                lot's of content in red container
            </div>
        </div>
        <div class="row info justify-content-around d-none d-lg-block">
            <div class="col-12">
                lot's of content in green container
            </div>
        </div>
    </section>
    <div class="col-lg-4 aside">
        <div class="row">
            <div class="col-12">
                lot's of content in blue container
            </div>
            <div class="col-12 d-block d-lg-none">
                lot's of content in green container
            </div>
        </div>
    </div>
</main>
cssbootstrap-4flexbox

Answer №1

My approach utilizes a combination of bootstrap and custom CSS to achieve the desired solution. While bootstrap alone may not have specific mobile breakpoints for the position-absolute utility, I incorporated it seamlessly into the design.

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    
    <style>
        .cnt-red { border: 5px solid red; }
        .cnt-blue { border: 5px solid blue; }
        .cnt-green { border: 5px solid green; }

        @media (min-width: 576px) {
            .cnt-left { width: 75%; }
            .cnt-right { width: 25%; right: 0; top:0; position: absolute; }
        }
    </style>
</head>
<body>
    <div class="d-flex flex-column ">
        <div class="p-2 cnt-left flex-grow-1 cnt-red flex-fill">Flex item 1</div>
        <div class="p-2 cnt-right cnt-blue flex-fill">Flex item 2: Lorem ipsum dolor sit amet consectetur adipisicing elit... </div>
        <div class="p-2 cnt-left cnt-green flex-fill">Flex item 3</div>
    </div>
</body>
</html>

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

What to do when CSS Overflow doesn't work as expected?

Are there any alternatives for browsers that don't support CSS overflow? I am working on a new layout that heavily relies on the overflow property, however it seems like android browsers do not handle it well and as a result, my layout is broken. I am ...

javascriptjqueryandroidcss

CSS not being applied to certain HTML elements due to an error in implementation

Utilizing Bootstrap's vue form-group has been instrumental in my creation of input fields. I am currently attempting to apply specific CSS styling to the 'legend' element within the following code: <fieldset id="__BVID__59" class="form-g ...

htmlcssvue.js

Ways to establish a minimum height for material cards using Material UI

I am facing an issue with a card that contains a nested table. The card expands and shrinks based on the size of the table inside it. I want to prevent the card from shrinking when the table has no data or just one entry. Instead, I need the card to mainta ...

javascriptcssreactjsmaterial-ui

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

csstwitter-bootstrapvue.jsconditional-rendering

Uploading files with previews and no option to alter the image dimensions

I am having trouble with resizing an image preview before submitting it. Despite setting the width and height to 1px in both the div and image, it still displays at its normal dimensions. $(function() { var imagesPreview = function(input, placeToIns ...

javascriptjqueryhtmlcssfile-upload

Extract the <br /> tag exclusively from the content inside the div

My experience with WooCommerce has led me to the need to include <br> within a product name. However, this break appears differently as <br /> in the .woocommerce-breadcrumb element. This is what the breadcrumb currently display ...

jqueryhtmlcsswordpresswoocommerce

File bootstrap.min.css is currently experiencing compatibility issues

I am currently working on a website where I have two images that are displaying vertically. However, I would like these images to be displayed horizontally with animation. I attempted to use Bootstrap to achieve this horizontal layout, but when I include ...

javascripthtmlcsstwitter-bootstrap

What is the best way to create a responsive navigation bar design?

I'm trying to create a unique navigation bar that features a hexagon-shaped logo and 3 buttons aligned in a specific way. Check out the screenshot for reference here. Although I've managed to align everything perfectly on a fullscreen (1920x1080 ...

htmlcssnavbarresponsivepositioning

What is the best approach to display a fluctuating price depending on specific options chosen in Next.js?

When working with 2 different select tags and rendering images based on the selection, I also want to display a price determined by the options chosen. For instance, selecting "Your Current Division" as Iron and "Your Desire League" as Bronze/Silver/Gold s ...

javascripthtmlcssreactjsnext.js

What is the best way to create a unique shadow effect for a container in Flutter?

I am facing a challenge with my screen layout that uses GridView.builder with crossAxisCount: 3. In the itemBuilder, I am returning a Container with shadows on the left, right, and bottom, but so far, I have not been able to achieve the desired outcome. H ...

cssflutterdartcontainersshadow

"Emphasize menu items with an underline as you navigate through the

I am using Gatsby with React and have a navigation menu with links. I would like to make it so that when a link is clicked, a border bottom appears to indicate the current page, rather than only on hover. <ul className="men" id="menu"> ...

javascripthtmlcssreactjsgatsby

Animate the Bootstrap carousel from top to bottom instead of the traditional left to right movement

Is there an option available in the bootstrap carousel to animate it from top to bottom and bottom to top, rather than from right to left and left to right? jsFiddle link <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Embrace the power of Bootstrap 3 with a cutting-edge logo,

Looking to design a layout that features a logo on the left and a slogan pane with the navigation bar below it on the right. Check out image #1 for reference. As the screen narrows, the plan is to have the navigation pane move below the logo and slogan. T ...

csstwitter-bootstrap-3navgraphical-logo

Issue with displaying Bootstrap Tooltip

Recently, I launched a fresh website (currently residing on a sub-domain). However, I am facing an issue with the tooltip not showing up when hovering over the text Get the FinEco Bookmarklet. <span class="bookmarklet"><span class="fa fa-bookmark ...

htmlcsstwitter-bootstraptooltip

What is the solution to prevent a CSS flex column from expanding to fill the width in a row with three

I am trying to create a flex row with three columns, but when I only have two columns in the row, the second column gets pushed to the right side. You can see this issue in the image below. https://i.sstatic.net/cVVqB.png In the image, the red lines indi ...

htmlcssbootstrap-4

Creating circular borders in CSS: A step-by-step guide

Is it possible to create a circular border in CSS? Currently, the shape is square but I would like it to be circular. color: white; left: 52px; position: absolute; top: 65px; padding: 3px; background-color: rgb(0, 195, 255); ...

htmlcss

Adjust the class of the iframe element when clicked

I am attempting to change the class of an iframe (soundcloud embedded track) when it is clicked, in order to apply different properties. However, my code doesn't seem to be working as expected. Here is what I have: Here is a snippet from my index.htm ...

javascriptjquerycsshtmliframe

Creating a visually balanced footer in your webpage is essential to providing a cohesive design. Learn how to perfectly align left

Struggling to align my footer text in a straight line. As a beginner, I hope this question isn't too basic! Check it out below: https://i.sstatic.net/ZophZ.png I want those three lines to be in perfect alignment. I've been taught a grid method ...

htmlbootstrap-4footerstyling

Leveraging the X-Send module for efficiently delivering css, javascript, and image files

I am in the process of setting up a file server that currently serves downloadable files such as .doc and .zip perfectly using X-Send. Is it also possible to use X-Send for serving text-based (css/javascript) or image files? I believe this method is quite ...

phpcssfileserverx-sendfile

two elements with the inline-block property not properly displaying inline and behaving like block elements

Having a CSS issue - attempting to display two code blocks with numbers on the sides next to each other, then stack them after a certain screen size. However, there seems to be an error occurring when the screen size is smaller. I'm open to making an ...

htmlcss