Changing flexbox positioning for 3 divs on mobile screens

Is it possible to align 3 divs differently based on screen width using Bootstrap flexbox classes? For example, I want them to align like the top image below on small widths (<576px) and like the bottom image below on larger widths (>576px).

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

I have tried using the basic set up with flexbox:

<div class="d-flex">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

However, I have not been successful in achieving the desired alignment as A and B do not share the same div on both small and large screens. I have experimented with different classes but have not found a solution.

csstwitter-bootstrapbootstrap-4flexbox

Answer №1

To achieve top alignment of an image, utilize align-content utilities within flexbox containers to align flex items along the cross axis. You have the option to use

<div class="d-flex align-content-start flex-wrap">...</div>

to position the content at the top of the image, and for bottom alignment, you can opt for

<div class="d-flex align-content-end flex-wrap">...</div>

In this scenario, it is assumed that the image will be in a separate <div>. To ensure responsive behavior, consider using .order classes.

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

Why isn't the max width applying to an input element wrapped within a Div?

Hey there! I recently created a Search Bar and wrapped it inside a div with a max-width of 500px, but for some reason, the max-width is not working as expected. I searched on Stack Overflow and came across a helpful link on Why would max-width not work on ...

javascripthtmlcss

Can you please provide guidance on implementing automatic horizontal scrolling with pauses between each div?

setInterval(function scroll() { $(".box_auto").each(function(i, e) { $("html, body").animate({ scrollTop: $(e).offset().top }, 500).delay(500); }); setTimeout(function() { $('html, body').animate({ scrollTop: 0 } ...

javascripthtmljquerycss

Utilizing JavaScript to display numerous variables within a text box

After creating an HTML form, I encountered an issue where only one selected item was displayed in the text field. Can anyone help me solve this problem so that multiple names can be printed in the textfield? function myFun(extras) { document.get ...

javascripthtmlcssforms

Optimized layout for screen resolutions exceeding 1000 pixels wide

As I work on making my website responsive using Dreamweaver CC, I'm encountering a problem with screen sizes larger than 1000px. In Dreamweaver, there are three options for responsive web design at the bottom: desktop 1000px and less, tablet 768px an ...

htmlcssresponsive-design

Is there a way to modify the font color in Chrome when the input autofill feature is active?

I tried adding the css code below: input:-webkit-autofill{ color:white; } Unfortunately, it didn't have any effect. If anyone can assist me with this issue, I would greatly appreciate it. Thank you. ...

css

Enhancing User Experience on Android Devices: Automatic Website Zoom-In Feature for Responsive Design

For the first time, I am delving into creating a responsive website design. I seem to be encountering difficulties when it comes to smartphones. I have been using the following meta-tag to ensure that the website loads "zoomed in". (I found this method on ...

androidhtmlcssviewstate

Is it possible to echo a CSS class using PHP?

I have a PHP structure and I would like to embed my div in PHP. I need to write CSS with echo class, but I am unsure of how to do it. Here is my div: <div class="mydiv"> <img src="catalog/view/theme/default/img/mypng.png" alt=""> </div ...

phpcss

Step-by-step guide on creating a clickable button that triggers the appearance of a block showcasing a dimmed photo upon activation

Is there a way to create a button that triggers a pop-up block featuring a darkened photo when clicked? ...

javascripthtmlcssbootstrap-5

Upon page load, a dazzling SVG file will flicker before being adorned with CSS styles

I'm experiencing an issue with an SVG arrow icon on my webpage that flashes quickly across the entire screen upon page load before settling into its proper size and placement. I've tried using CSS to initially hide the icon and then reveal it aft ...

javascriptjqueryhtmlcss

jQuery only works partly with IE

I am attempting to utilize jQuery to modify some css styles when the screen size is smaller than a specific threshold (essentially, recreating "@media screen and (max-width: 1024px)", but with consideration for older versions of IE that do not support this ...

jquerycssinternet-explorer

What is the best way to center a div at the bottom of the screen?

Here is an example of CSS: #manipulate { position:absolute; width:300px; height:300px; background:#063; bottom:0px; right:25%; } And here is the corresponding HTML: <div id="manipulate" align="center"> </div> What is the best w ...

htmlcss

Tips for collapsing or expanding a single button in Angular 6

I want to create rows of collapsible buttons in my code, but every time I visit the page, all the buttons are already expanded. Additionally, when I click on any button, they all expand or collapse simultaneously. HTML <div id="accordion" *ngFor="let ...

htmlangularbootstrap-4

Effortlessly collapsing cards using Angular 2 and Bootstrap

Recently delving into Angular 2 and Bootstrap 4, I set up an about page using the card class from Bootstrap. Clicking on a card causes it to expand, and clicking again collapses it. Now, I want to enhance this by ensuring that only one card is open at a ti ...

angulartypescriptbootstrap-4

tips for resizing bootstrap dropdown menu to fill entire page

The image clearly shows that the zabubi solution network platform has a dropdown menu with the label "no request for collaboration to be accepted" on top. The menu occupies half of the page and does not seem to be responsive. Even when the page is resized, ...

javascriptcssbootstrap-5

What is the process for setting an object's property as a href in an AJAX call?

I've got a quick query. How can I assign an object's property to the href attribute? I've indicated the line with a comment. success: function (listOfTags) { let tagData = ''; $.each(listOfTags, function (i, tag) { ...

htmljquerycssajaxhref

Utilize AJAX JQuery to Transmit POST Data

I am facing an issue with sending the selected item from a Bootstrap dropdown to my controller using the POST method. Unfortunately, I am encountering difficulties in getting it to work. Within the dropdown, I am fetching records from the database and dis ...

javascriptphpjqueryajaxtwitter-bootstrap

The dimensions of the pop-up window in Chrome's JavaScript are not displaying correctly

My goal is to launch a new chat room window on our website. The dimensions of the chat room are set to 750px x 590px. Below is the link I am using to trigger the javascript popup. <a href="javascript:void(0)" onclick="window.open('http://gamersuni ...

javascripthtmlcssgoogle-chrome

Transferring an object from one inventory to another

I'm in the process of developing a task manager that enables users to add and remove tasks. I am also working on enabling the ability for users to transfer tasks from one list to another. The current code I have written doesn't seem to be functio ...

javascripthtmlcssgoogle-chrome-extension

Div not centered after translation by 50% on the Y-axis

My HTML and body have a height of 100vh. Inside my body, I have a square that is 100px by 100px. When I apply top: 50% to the div, it moves down 50%. But when I apply translateY(50%) to the div, it does not move down 50%. Why is this? Please note that y ...

htmlcss

Verify the presence of a mouse before attempting to hover

Is there a way to determine if the user has a cursor to hover over elements using JavaScript, while also utilizing Bootstrap? if (hasCursor()) { doCode(); } I initially attempted to check if it was a touch device, but faced limitations testing on my 2- ...

javascripthtmlcssbootstrap-5