When resizing the browser, Bootstrap's container class consistently prioritizes the alignment of elements within the first columns on the left side

When resizing the browser, the container class in bootstrap always focuses on the first column on the left class="col-lg-3". Is there a way to make it focus on the middle column col-lg-6 instead?

Before resizing:

https://i.sstatic.net/X4jAk.png

After resizing:

https://i.sstatic.net/b2RNW.png

First part of Bootstrap code:

<section class="newsfeed">
    <div class="container-fluid">
     <div class="row">
      <div class="col-lg-3">

     <a href="#">
     <div class="storybox" 
       style="background: linear-gradient( rgba(34,34,34,0.78), rgba(34,34,34,0.78)), url('assets/img/posts/2.gif') no-repeat;
              background-size: cover;
                  background-position: center center;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
                  -o-background-size: cover;">
          <div class="story-body text-center">
           <div class=""><img class="img-circle" src="assets/img/users/10.jpg" alt="user"></div>
           <h4>Clifford Graham</h4>
           <p>2 hours ago</p>
          </div>      
     </div>
     </a>
csstwitter-bootstrapbootstrap-4

Answer №1

Take advantage of Bootstrap's flex-box order utilities to easily rearrange the sequence of content: https://getbootstrap.com/docs/4.3/utilities/flex/#order

To shift a column container to the beginning of the order, simply apply the order-first class (e.g., add it to col-lg-6 in your scenario). If you want to revert it back to its original position, you can utilize order-md-0, order-lg-0, or order-xl-0 based on the screen size requirements.

The functionality of the order-first utility class is achieved by adjusting the CSS property order to -1; on the other hand, order-0 resets the order property to the default value of 0 for returning it to the regular flow of content.

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 could be causing my div element to not inherit its parent div's width?

My query revolves around a header div that I'm struggling to align with the same width as its parent div, while keeping the content centered. Currently, the div is only as wide as its content, causing it to be off-center. https://i.stack.imgur.com/E1 ...

csscss-position

Ensuring the text remains positioned above another element constantly

Looking to have the text float above a regular box and resize the font size accordingly? Here's what I've tried: https://jsfiddle.net/a87uo3t2/ @import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono'); body { margin: ...

htmlcss

Is there a way to assign a unique background color to the menu title based on each menu item or the specific article being viewed?

I've been working on a Joomla 2.5 based website and have a submenu with a title at the top, displaying the name of the top menu category. The title currently has a background color, but now I want to have a different background color for the title on ...

cssjoomlamenumodulejoomla2.5

Enhance the appearance of the <td> <span> element by incorporating a transition effect when modifying the text

I need help with creating a transition effect for a span element within a table cell. Currently, when a user clicks on the text, it changes from truncated to full size abruptly. I want to achieve a smooth growing/scaling effect instead. You can view an exa ...

javascripthtmljquerycss

Icons on the dropzone are displayed outside of the designated dropzone area

After using dropzone to upload multiple files, I noticed that the icons are displaying outside of the designated box. In the image below, the dropzone form is highlighted in yellow, but when I select numerous files, they overflow and appear outside the for ...

cssdropzone

I am experiencing an issue with setting the border to none using .navbar-toggler

I'm currently utilizing bootstrap 5, and I've encountered an issue with setting the border and outline to none in my CSS file. Specifically, when I apply these properties to the nav-toggler class, it seems to have no effect. .menu-bar .navbar- ...

htmljquerycssbootstrap-5

CSS: The Drop Down menu suddenly vanishes every time I attempt to select an item from the visible list

I'm facing an issue with my dropdown menu that I can't seem to resolve. Whenever I hover over the menu, it disappears before I can even click on any items. <ul id="menu"> <li><a href="#title">Home</a></li> ...

htmlcss

What is the best way to ensure a div container fills the entire height of the screen?

I am currently working on developing my very first iOS HTML5 app, which is a simple quote application. One challenge I am facing is how to set the height of my container div to match that of an iPhone screen. You can view the design I have so far on this j ...

htmlcss

The function within the React component is failing to produce the expected output

After importing two types of images (IMG and IMG2), I wanted to display IMG when the viewport width is less than 600px, and IMG2 when it's equal to or greater than 600px. I created a function to determine the viewport width and return the respective i ...

javascripthtmlcssreactjs

Is it possible to display a variety of color schemes in just one console.log()?

My task involves working with an array of hexadecimal values, "colors": ["#d5dd90","#e6bb45","#ef9770"] To log these out in different colors, I used the following method: colors.forEach((value)=>{ console.log(& ...

javascriptcssconsolestylingconsole.log

AngularJS feature that enables resizing modal popup dimensions through a modal service

Currently working on an AngularJS application and in need of opening a specific modal popup with larger dimensions. Are there any AngularJS libraries available that cater to customizing modal popups? Explored AngularStrap (http://mgcrea.github.io/angular-s ...

cssangularjstwitter-bootstrapangular-uiangular-ui-bootstrap

Having issues with the jQuery .css function?

I need help with hiding and showing tabs on my webpage based on a successful login. I have tried various methods, such as setting the tab to be hidden by default in the HTML code and then using JavaScript to display it upon login. However, none of these me ...

javascriptjqueryhtmlcsstabs

Is there a way to modify the size and color of a specific word in a CSS animation?

As a newcomer to CSS, I am exploring ways to change the font size and color of a specific word in my sentence after an animation. My initial attempt was to enclose the word within a span class like this: <h2>I'm <span style = "font-size: ...

htmlcss

Any tips for creating a website with non-redirecting tabs?

I'm currently working on a website project and I would like to incorporate tabs on the side of my site for easy navigation. I envision an interactive tab system where users can click on their desired category and be directed there instantly, rather th ...

htmlcsswebtabs

The presence of text is leading to CSS placement troubles

I operate a website dedicated to comic content and am looking to incorporate text (retrieved from the database field "description") beneath each comic thumbnail. Here are my two inquiries: 1) I'm facing an issue where adding text below a comic caus ...

phpcss

Is it necessary to use a specific button to submit on Return (Enter)?

In a wizard-type form, there are two buttons present. The Back button is positioned on the left side, while the Next button is located on the right side. For an example of this setup, visit http://jsfiddle.net/WSwb7/1/. Please note that submitting the form ...

htmlcssformstwitter-bootstrapsubmit

Disarrayed image in absolute position on my webpage

I have a website with an auto-resizing background, but I am struggling to have a fixed black bar at the bottom of the page. Everything looks good when the browser window is maximized, but as soon as you scale it down and start scrolling, the black bar alm ...

htmlxhtmlcss

Creating responsive layouts with flexible image sizes using Flexbox

My exploration of Flexbox began by testing it on an existing template sourced from a previous stackoverflow question. I am currently focusing on adjusting the image size to better fit within its parent div. max-width: 50px; height: auto; margin:auto; ...

htmlcssimageflexbox

Display an image from the API that rotates when hovered over with the mouse

Currently, I am fetching data from pokeapi.co and dynamically inserting it into a table. This data includes various stats and an image. My goal is to make the image rotate when hovered over. While creating the table, I added an id="pokeImage" dynamically. ...

javascriptjquerycssajax

Button within the Magnific Popup (do not use to close)

I am currently developing a website with a gallery page that utilizes the Magnific Popup plugin. My client has provided lengthy 'captions' for each image, almost like short stories. To display these captions effectively, I have utilized the titl ...

javascriptjquerycssmagnific-popup