How can I stack right columns on top in Bootstrap grid collapse?

I recently discovered that I can rearrange my grid columns using the Bootstrap grid column ordering feature. However, I am facing a challenge as I cannot seem to figure out how to make the "right column first" only when it is collapsed.

Currently, I have two columns, "LEFT" (col-lg-4) and "RIGHT" (col-lg-8). My goal is to have the RIGHT column collapse on top of the LEFT column when viewed on smaller screens, but still remain on the right side if not in a collapsed state.

Is there a way to achieve this desired layout? Any suggestions or tips would be greatly appreciated!

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

When working with newer versions of Bootsrap, you have the option to utilize flex-column reverse and specify when this reversal should occur (for example, below flex-lg-row):

<div class="row flex-column-reverse flex-lg-row">
    <div class="col-lg-4">
        sidebar
    </div>
    <div class="col-lg-8">
        main
    </div>
</div>

You can find more information on a similar topic in another thread: How do I change Bootstrap 3 column order on mobile layout?

Answer №2

To create a layout where the first column appears on the right in larger screens and the second column on the left, you can use the order property. Assign a higher order value to the first column (e.g., 'order-md-3') and leave the second column with the default order of 0. This will make the first column appear on the right side because of its higher order.

<div class="row">

      <div class="col-md-5 order-md-3">
        <img src="../img/profile/fotocv.png" alt="profile picture" width="100%">
      </div>

      <div class="col-md-7">
        <div class="plang">
          <h1>Hello!</h1>
          <h1>I'M AMMARIDHO SIREGAR</h1>
          <h3>Web Developer</h3>
        </div>
      </div>

 </div>

Answer №3

Include the CSS property float: right for both elements and ensure the placement of the right one precedes the left one in the HTML structure.

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

Strange Behavior of Anchor Tags

I've been struggling with my anchor tag not working properly. The desired URL is localhost/VShroff/home/about.php, but it keeps changing to localhost/about.php without redirecting. I've spent a long time trying to figure this out. Here is the HT ...

jqueryhtmlcssanchor

Show buttons in varying styles aligned next to each other

Here is the code snippet I'm currently working with: <fieldset class=last> <button>Refresh</button> <button> Clear</button> </fieldset> <form method="POST" action="*******"> <button> Down ...

htmlcss

React-Native-Web generates default classes for inline styles and erroneously applies them in a jumbled sequence

Currently working on a project involving react native web and NextJS. I have encountered an issue with inline styles in React that seems to be caused by RN-Web. It appears that there is a mechanism within the framework that automatically generates classes ...

cssreact-nativenext.jsreact-native-web

Navigate the Xpath to target the text enclosed by tags, pausing the extraction process upon encountering an internal tag within the

I am seeking to extract specific text from various forms of HTML code. Only the text within certain tags should be considered, and everything after those tags should be ignored. The structure of the HTML varies. <span class="classA">Text 1 ...

htmlxpathxpath-1.0

Storing all information in a single list and then either revealing them one by one or modifying the HTML content of individual div elements

I'm currently working on an app using "vue.js" that features multiple videos, each with a button, title, and description. When a user clicks on the button, only the selected video's title and description should be displayed while hiding those of ...

htmlvue.jsvuejs2

Running a JavaScript function within a designated div element

I'm currently facing an issue with executing a javascript function - onload only in a specific div. I seem to be stuck on this problem, so if anyone could offer some assistance, I would greatly appreciate it. Thank you very much in advance! functio ...

javascriptjqueryhtml

Is it possible to dynamically load JavaScript?

I'm currently working on a project that requires me to dynamically add JavaScript. I have a global.js file that contains all the global variables I need to add dynamically. However, I'm facing an issue where global.js is not being added before ut ...

javascripthtml

Customizing Material-UI styles with type overrides

Is there a way to change the MuiIconButton-root class when using MuiSvgIcon with the fontSizeSmall attribute? import React from 'react' import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; const theme = createMuiT ...

cssreactjsstylesmaterial-ui

Ways to troubleshoot and fix the 500 Internal Server Error

Why am I receiving a "500 Internal Server Error" when making an ajax call? What could be causing this issue and how can it be fixed? ...

htmlajax

Stop scrolling when hovering over an element

I'm currently working on animating a scrolling div and have managed to get the trigger to fire, scroll, and stop on click and/or mouseenter. However, I am now looking to make it pause when the mouse hovers over the div instead of stopping altogether. ...

javascriptjqueryhtmlwordpress

How can I utilize Bootstrap 4 to ensure that an image remains centered on the page even when the page size is adjusted?

Looking to insert a thumbnail in front of a video using Jquery. I managed to add the image, but facing an issue when resizing the page as the thumbnail should be centered. Here is the desired layout: https://i.sstatic.net/IDOb9.png However, my current res ...

cssbootstrap-4

Tips for making an HTML table resizable with scroll bars using jQuery

Can someone provide guidance on how to design a table in HTML with resizable columns and scrollbars, while keeping the header fixed during scrolling? Any assistance is appreciated. ...

jqueryhtmlhtml-tablescrollbarresizable

Having trouble with the functionality of the cascading menu?

I am having trouble with a drop-down menu. The first level works fine, but I can't seem to get the second level of the menu to display. Appreciate any help you can offer. Thank you. javascript <script type="text/javascript"> $(document).ready( ...

javascriptjqueryhtmlcss

Developing an HTML table using information from JSON dataset

I am working with an HTML file that includes the following code snippet: <div> <table id="apps"></table> </div> Recently, I started receiving JSON data structured like this: { "1": [ { "A": "", ...

javascriptjqueryhtmljson

Code snippet for calculating the size of an HTML page using JavaScript/jQuery

Does anyone know of a way to calculate and display the size/weight (in KB) of an HTML page, similar to what is done here: Page size: 403.86KB This would include all resources such as text, images, and scripts. I came across a Pelican plugin that does th ...

javascripthtmljquerysize

Updating URL Encoding in Java

Searching for a solution to replace character encodings in URL's has been challenging. Outdated libraries and answers found on the internet have not provided a working solution so far. import java.io.*; import java.util.*; public class Chapter6 { pu ...

javahtmlcharacter-encoding

Include images in the form of .png files within the td elements of a table that is dynamically generated in the index

I have successfully created a table using embedded JavaScript with the help of messerbill. Here is the code: <table id="Table1"> <tr> <th>Kickoff</th> <th>Status</th> <th>Country</th> < ...

javascripthtmlnode.jsejs

Attempting to navigate the world of AJAX and PHP

My experience with AJAX is limited, but I am currently working on a project that requires a form to submit data without refreshing the page. The goal is to display the result in a modal window instead. To achieve this functionality, I understand that imple ...

javascriptphphtmlajax

Loading HTML content in a WPF WebBrowser without encountering security messages

Currently, I am developing a WPF application in which I create the content of an HTML file as a string (including some JavaScript functions for calculations). After generating the string, I save it as an HTML file on my local disk and then reload it using ...

javascriptc#htmlwpf

CSS - Absolute positioning appears to be slightly choppy in Microsoft Edge

I have successfully implemented a slip scrolling function to reveal/hide a fixed logo on scroll, but I am facing some issues with Microsoft Edge browser. While testing in various browsers, everything works smoothly except for Microsoft Edge. In this brows ...

javascriptjqueryhtmlcssmicrosoft-edge