Moving the center div to the top of the content for mobile screens

Would like some help in positioning the col-md-6 div to the top of my website on mobile, causing both col-md-3 elements to stack on top of each other.

<div class="row">
    <div class="col-md-3">
        <div class="box">
            <div class="header">
                sidebar 1
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box">
            <div class="header">
                middle
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <div class="header">
                sidebar 2
            </div>
        </div>
    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

By setting the .row element to have a display: flex property (shown within a media query but can also be set outside of it), you can conveniently control the order of the flex items using the order attribute. When using flex-direction: column, the items can be rearranged in a vertical fashion. While it is possible to assign an order value to all items, giving a value of -1 to a single item will ensure its placement at the top if no order is specified for the rest.

@media screen and (max-width: 800px) {
    .row {
        display: flex;
        flex-direction: column;
    }
    .col-md-6 {
        order: -1;
    }
}

Answer №2

No additional CSS is necessary for this solution. Simply utilize the Bootstrap order* classes...

<div class="row">
    <div class="col-md-3">
        <div class="box">
            <div class="header">
                sidebar 1
            </div>
        </div>
    </div>
    <div class="col-md-6 order-first order-md-0">
        <div class="box">
            <div class="header">
                middle
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <div class="header">
                sidebar 2
            </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

Obtain and display pictures in HTML

I am working on a code snippet that fetches images from a directory and displays them in HTML. The issue I'm facing is that the images in the directory keep changing every second, causing problems on mobile browsers where the cached images are not bei ...

javascriptandroidhtmlimageviewer

Tips for initiating the transfer of data to a modal through bootstrapping

<input type="button" class="btn btn-primary btn-lg btn-block" value="(AAP)" data-toggle="modal" href="#teklif{$foo}"> I am looking to pass the foo value. foo == number such as 0,1,2.. <div id="teklif" class="chat_modal modal fade hide"> ...

phptwitter-bootstrapmodal-dialogsmarty

Using JavaScript to create a search bar: Can "no results found" only show after the user has completed typing their search query?

How can I ensure that the "no match" message only appears after the user has finished typing in their search query, rather than seeing it while they are still typing "De" and the list displays "Demi"? usernameInput.addEventListener("keyup",function(){ ...

javascripthtmlcssdom-eventsdisplay

Utilize JQuery's appendTo() method along with html() function for seamless content replacement

I have a question about appending and replacing div elements. I am currently using the following code: $('.toggle_questions').appendTo('#'+sectionId).show(); While this works perfectly to append my div with the class .toggle_questions ...

javascriptjqueryhtmlappendto

Changing images based on different triggers - HTML Markup with jQuery Carousel

I have a website where I'm using a plugin called CarouFredSel, available at Most of the time, it works perfectly fine. However, there are some images that cause the markup to break. I've tried troubleshooting the issue but haven't been able ...

jqueryhtmlcarousel

The video continues playing even after closing the modal box

I am facing an issue with my code where a video continues to play in the background even after I close the modal. Here is the code snippet: <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria- ...

javascripthtmljquerycss

Guidelines for choosing input using jQuery

I am looking to retrieve the value of an input using jQuery. Specifically, I need to extract the value of a hidden input with name="picture" when the user clicks on the حذف این بخش button by triggering the function deleteDefaultSection( ...

javascripthtmljqueryjquery-selectors

"Creating dynamic radio buttons within a dynamic table using Ajax and jQuery: a step-by-step guide for toggling

Looking to generate a dynamic html table with data retrieved from a web method in asp.net using Ajax jQuery. One of the fields is a boolean value that needs to be associated with radio buttons. However, encountering an issue where setting attributes like ...

jqueryhtmlasp.netajaxasp.net-mvc

Angular: Implemented instructions as provided, however encountering issue with Bootstrap modal not functioning as expected

I'm currently working on an Angular application and experiencing issues with the modal functionality. Despite installing bootstrap 4.5.3 and including the code below in the style.css file: @import "~bootstrap/dist/css/bootstrap.css"; Whene ...

angularbootstrap-4

Retrieving checkbox value upon form submission

Imagine having a form containing several checkboxes. Upon submitting the form, you aim to display all values of the selected checkboxes. <form> <input type="checkbox" id="product1" name="product1" value="12"> <input type="checkbox" id="prod ...

javascripthtml

Is the XPath in Selenium executed against the Document Object Model (DOM) or the HTML file

Currently, I am in the process of developing a library for analyzing webpages. My approach involves using Selenium to access elements on a webpage through xpath. I have been contemplating replacing Selenium with an offline xpath tool. However, upon furthe ...

javascripthtmldomseleniumxpath

Utilize Selenium in Python to choose an element

When working with the following HTML code: <div class="nav-category__col" id="category_nav_level_3" style="display: block;"> <input type="hidden" value="1" name="videogame_type" id="videogame_type"> <ul class="nav-category__list" adp ...

pythonhtmlselenium

Issue with CSS styling not being reflected in JSF application

I am currently diving into the world of JSF and facing an issue with moving my inline styles to a CSS file. Despite my efforts, I can't seem to get it to work as expected. Below is the code snippet for reference. The location of my XHTML file is as f ...

cssjsf

Hidden Bootstrap 4 Layout: Utilizing 2 Columns

For my latest project, I'm designing a bootstrap webpage with a 4-column grid layout. The twist is that two of these columns will initially be hidden - one on the left and the other on the right. By clicking a toggle button on the left, the user can r ...

jqueryhtmltwitter-bootstrapcsstwitter-bootstrap-3

Confusion arises when using Materialize CSS for selecting elements

Currently, I am working on an app using Cordova. Within this project, I have incorporated jQuery Mobile's CSS and JS along with Materialize CSS and JS. However, I recently encountered an issue after integrating the Materialize files. Specifically, whe ...

jqueryhtmlcsscordovamaterialize

RegEx for Filtering Out HTML Entities Without Escaping

Is there a way to prevent the use of unescaped ampersands in a specific input field? I've been struggling to create a RegEx that blocks "&" unless it's followed by "amp;" or just avoid the usage of "& " (with a space). I attempted to mod ...

htmlxmlregexescapingampersand

Can directives be inserted within the v-html directive?

I am currently working on some web features, but I have encountered a problem. I was trying to create multiple HTML structures that include Vue directives with v-html, but I couldn't figure it out. So, does anyone know how to render Vue directives wit ...

javascripthtmlvue.jsvuejs2

Achieving and maintaining the center alignment of a horizontal dropdown menu

Struggling with creating a fixed, 100% width nav bar that stays centered when the page is resized? The drop down menu headings are causing issues as they seem to float left instead of staying centered. Not sure how to fix it? Take a look at the live resul ...

htmlcssnavigationcenter

External CSS styling does not appear to be affecting the Shadow DOM in Google Chrome

I am currently utilizing polymer's paper-action-dialog and paper-button components on my webpage. Within the paper-action-dialog element, there are two paper-buttons. I am looking to style these paper-buttons externally (in the main HTML file). I have ...

htmlcssgoogle-chromepolymershadow-dom

The pattern on one of the cube faces is mirrored

When using an image for the cube texture, I have noticed that the image displays correctly on three out of four faces, but appears reversed on the fourth face. Below is the relevant code snippet: // Accessing the container in the DOM var container2=docume ...

javascripthtmlthree.js