I have a unique design using Bootstrap as shown below:
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-2">
3
</div>
</div>
This layout displays content in this order: 1 2 3.
However, on mobile devices, the first column appears at the top by default. I want to display the third column second and then the second column last. Is it possible to achieve this with Bootstrap?
To utilize the predefined classes from bootstrap (https://getbootstrap.com/docs/4.1/utilities/flex/#order), follow the example below:
.row > div {
border:2px solid;
text-align:center;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-2 order-0 order-md-0">
1
</div>
<div class="col-md-8 order-2 order-md-1">
2
</div>
<div class="col-md-2 order-1 order-md-2">
3
</div>
</div>
</div>Using Flexbox in Bootstrap 4 allows for easy grid creation, utilizing the order property.
@media screen and (max-width: 768px) {
.col-md-2 {
order: 1;
}
.col-md-8 {
order: 2;
}
}
Check out the demo here: https://jsfiddle.net/o4ab1wrq/
For more information, visit: https://developer.mozilla.org/de/docs/Web/CSS/order
I have been working on creating a vertical scrolling carousel, and so far everything seems to be functioning well. I can scroll horizontally using buttons and swipe gestures successfully on the simulator. However, when I view the website on a real mobile d ...
Currently, my home website is built using Java/SpringMVC web server. I am looking for a way to stream my webcam feed on my website so I can access it from any browser and see the live view of my room. If anyone has recommendations for an easy-to-use solut ...
On mobile devices, my select elements are currently displayed as modals with options. However, I need to change this appearance to resemble the dropdown list view observed on desktop devices. Your assistance is greatly appreciated. ...
Currently, I am in the process of building a website on my laptop while following an instructor's video tutorial. It has been important for me to set the same pixel measurements as the instructor in order to replicate the design they provided. However ...
Currently working on a PHP-based website that is utilizing the Zend framework and hosted on an Apache server. The folder structure within my www directory looks like this: +www | |_+css | | | |_images | |_js | |_images The issue I'm ...
I'm struggling to align my footer navigation inline with my footer title. Check out this code snippet to see what I've tried so far: https://jsfiddle.net/nkzsufov/ I experimented with using absolute and relative positioning: .footerNav { margi ...
Recently, I've been working on linking from my mobile site to a particular item within the Amazon app. My JavaScript code includes a try/catch block that redirects users to the webpage if they don't have the app installed. However, I've foun ...
After researching how to utilize JavaScript drag functionality to move elements, the goal is to dynamically adjust the cursor position within a square when dragged. In an attempt to simplify the process and avoid storing x and y offsets as separate variabl ...
Looking to transform this row of images... https://i.sstatic.net/UWBUy.png I need to create a small carousel for displaying the images on mobile devices (Responsive Design) using bootstrap. Here is the code for the current arrangement of images: <div c ...
There is a JSON file located at a URL that looks like this: [{"tier":"SILVER","leagueName":"Tryndamere's Wizards","queueType":"RANKED_SOLO_5x5","playerOrTeamId":"91248124", "playerOrTeamName":"NunoC99","leaguePoints":18,"wins":411,"losses":430,"rank" ...
Yahoo finance streaming employs a unique method where a file gradually grows in size to continually update their data: ^FTSE Is there a way for me to gather this data (I have no intention of selling it- just looking to create my own beginner trading dash ...
Inside a form, I have a button with the following code: <form method="post" action=""> <button type=submit value="hello" name="submitform">World</button> </form> Interestingly, the behavior of this button type varies across differ ...
In my development setup, I have a react component that is embedded within two distinct applications each with their own webpack configurations. Within the component, I am utilizing a FontAwesome icon using the react-fontawesome library: <FontAwesom ...
I am experiencing a small issue with the bootstrap grid system. I have set up a row with two sections using col-md-6. However, when I zoom in my browser to over 100%, the Close label and input move to the next line. I want them to stay in the same place re ...
My desired date format is "Wed Aug 07 2019 16:42:07 GMT+0530 (India Standard Time)", but instead I am receiving { year: 1789, month: 7, day: 14 } from ngbDatepicker. Any assistance on resolving this issue would be greatly appreciated. ...
Here's a link to the fiddle: check it out Take a look at a normal card below: https://i.sstatic.net/7Yqqv.png But when the browser window is resized, it shrinks to this: https://i.sstatic.net/1aexK.png This is the HTML structure: #product-list ...
I am currently facing a requirement where I must assign js variables to html input tag ids. For example: <input type='text' id='(here I need js variable)'/> I am aware that one way to achieve this is by creating the entire elem ...
I'm currently facing a challenge with adding text onto two different images, one on the left and one on the right. I have included HTML and CSS code but it seems to be incorrect. Can someone please help me fix it? #container { width: 400px; hei ...
I have a main page with links to 3 other pages (all within the same folder) named: content1.html, content2.html, and content3.html. <html> <body> <ul> <li><a href="content1.htm">content1</a></li> <li> ...
In this HTML snippet, there is a dropdown menu within a row with a height of 3.7rem. Unfortunately, when the dropdown is clicked, the list items are hidden behind the row because the height is not sufficient. I tried giving the dropdown a z-index of 1, but ...