I have an issue with bootstrap columns and can't seem to resolve swapping the order on smaller devices. I don't want these to stack because they stay a single row on desktop, tablet and mobile. However, on Desktop and tablet I want the row in the default order like this:
Logo Menu Button
But on phones, I simply want the first two columns swapped, like so:
Menu Logo Button
How can I achieve a simple reverse of the columns while keeping the row?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6 col-xs-4 col-xs-order-2">
Logo
</div>
<div class="col-lg-6 col-xs-4 col-xs-order-1">
Menu
</div>
<div class="col-xs-4 hidden-lg col-xs-order-3">
Button
</div>
</div>
</div>
Update:
screenshot of current result
The issue is that Bootstrap-4 dropped the order-xs class as it is the default class. If you want to apply changes for only xs-classes you have to change the roder for all elements and use order-sm--class to correct the order at sm-width:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6 col-xs-4 order-2 sm-order-1">
Logo
</div>
<div class="col-lg-6 col-xs-4 order-1 sm-order-2">
Menu
</div>
<div class="col-xs-4 hidden-lg order-3 sm-order-3">
Button
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-4">
Menu
</div>
<div class="col-lg-4 col-md-4 col-xs-4 order-sm-first">
Logo
</div>
<div class="col-lg-4 col-md-4 col-xs-4 hidden-lg">
Button
</div>
</div>
</div>
Related
I'm using Bootstrap I have coded this:
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="slider-slick-img container">
<div class="slider-for">
IMAGE GOES HERE
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
</div>
</div>
And the result of this code goes here:
As you can see it separates the columns of images and the column of contents (product title, product description & etc).
However they are both placed in one row class.
So how to properly place them together in one row as the expected result shows here?
Expected Result:
UPDATE #1
If I remove col-lg-12 col-md-12 col-sm-12 from <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5"> of the images column & content column, and also add col-6 instead of col-12 to both column classes, this result will appears:
However, as you can see, the content looks thinner and still have differences with the Expected Result image.
So how to solve this issue?
You're repeating the classes and simply complicated everything here, you have to define where you want break to full row it'll automatically break at that screen size, you needn't explicitly add another class, adding too many classes will confuse you and anyone who has to understand the code later. https://getbootstrap.com/docs/4.0/layout/grid/
<header>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</header>
<div class="container">
<div class="row">
<div class="col-sm-6 ">
<div class="">
<h1>
Cat
</h1>
<p>
The cat is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.
</p>
</div>
</div>
<div class="col-sm-6 ">
<div class="slider-slick-img container">
<div class="slider-for">
<img src="https://static.toiimg.com/photo/msid-67586673/67586673.jpg?3918697" width="100%" />
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
<img src="https://static.toiimg.com/photo/msid-67586673/67586673.jpg?3918697" width="100px" />
</div>
</div>
</div>
</div>
</div>
</div>
In both of your columns you have added the class col-12 which means that by default those columns will take all the row UNTIL you reach the first breakpoint which in this case would be col-sm. In order to fix this you have to specify col-6 instead of col-12 and if you check it in a screen size smaller than sm you'll notice each column is taking up to 6 places in the grid layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="slider-slick-img container">
<div class="slider-for">
IMAGE GOES HERE
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
<div class="col-6">
CONTENT GOES HERE
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Putting the div with content first and the one with the image after appears to mirror this layout correctly.
To define columns of equal width nothing more is needed than using class .col on each of them, as per official documentation (Bootstrap 5.0)
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
<div class="col">
<div class="">
IMAGE GOES HERE
</div>
<div class="">
<div class="">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
</div>
Remove container class applied with slider-slick-img. It is not needed. And kindly share the link to your code where we can check with actual content(images and add to cart box). Else, with these texts, it is working fine here.
You should not set 12 on lg screen for both div,
set 8,4 on xl,lg
set 6,6 on md
and set 12,12 on sm.
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="slider-slick-img container">
<div class="slider-for">
IMAGE GOES HERE
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
</div>
</div>
I solved your issue by opting for full responsive col's using grid system as shown in my code.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
<div class="col">
<div class="">
IMAGE GOES HERE
</div>
<div class="">
<div class="px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
</div>
You should also include the meta tag "viewport" for your html code to be processed correctly by the browser.
<meta name="viewport" content= "width=device-width, initial-scale=1.0", shrink-to-fit=no">
You can try putting this in the section of your work.
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 order-2">1
</div>
<div class="col-lg-4 col-md-12 order-1">2
</div>
</div>
</div>
I have 2 columns which I want to order in different ways on desktop and mobile. Order-1 works fine on mobile. But it works on desktop too. Help me to change order only for mobile view in Bootstrap 4.
Bootstrap is mobile first. You will need to add a different class for larger displays.
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 order-2 order-sm-1">1
</div>
<div class="col-lg-4 col-md-12 order-1 order-sm-2">2
</div>
</div>
</div>
Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .order-sm-* applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
Note that you have the classes order-2 and order-1. These classes are the same as order-xs-*.
So, if you want special rules only for large displays (lg and xl), just add the classes:
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 order-2 order-lg-1">1
</div>
<div class="col-lg-4 col-md-12 order-1 order-lg-2">2
</div>
</div>
</div>
You only need to do this...
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 order-md-2">1
</div>
<div class="col-lg-4 col-md-12 order-1">2
</div>
</div>
</div>
https://www.codeply.com/go/1niA4HHVoV
Here is a code I tried but not working especially in mobile view
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="col-sm-4">
<div class="product_body">
<div class="prod_image">
<img src="images/product/1.png">
</div>
<div class="prod_details">
<h4>Teddy bear</h4>
<div class="row">
<div class="col-xs-12 col-md-6 prod_price">
RS 333
</div>
<div class="col-xs-12 col-md-6 prod_offer">
88% OFF
</div>
</div>
</div>
</div>
</div>
If I'm understanding correctly, You need a <div class="row" before col-sm-4.
EDIT: From your screenshot, I don't see a container, which you will need. Maybe it is already included but I cant see it.
You need to have <div class="container"> <div class="row"> <div class="col-sm-4">
Try removing the other divs first to see if that fixes your problem, then work on adding others in.
I am using Bootstrap grid as follows:
<div class="row">
<div class="col-md-6 col-sm-12"> Column A </div>
<div class="col-md-6 col-sm-12"> Column B </div>
</div>
Which obviously shows Column A on the left and Column B on the right.When move to smaller screens it will be A on top and B below.
Is there a way to keep A on the left and B on the right on larger screens, but let B be on top and A below on small screens?
Thank you.
You can use Bootstrap Push and Pull.
body,
html {
padding-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
<div class="row">
<div class="col-md-6 col-md-push-6">
<div class="alert alert-info">B</div>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="alert alert-danger">A</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 hidden-sm hidden-xs"> Column A </div>
<div class="col-md-6 col-sm-12"> Column B </div>
<div class="col-sm-12 col-xs-12 hidden-lg hidden-md"> Column A </div>
</div>
you can add a duplicate column from A after B.
Hide the first A when the screen is sm or xs.
And hide the second A when screen is lg or md.
I am trying to build a mobile-first header. I have a single div class="row" with 4 columns on a single line for viewports of md, lg, but when the viewport drops to sm, xs I push 2 columns to a new row, and at this point the row and/or fluid-container does not resize (grow in height) causing a cut-off that only shows the top two columns.
Is there a way to prevent this, or to tell Bootstrap 3's row or container to grow?
Customer and total are cut off on xs and sm views, the gray area is a new div with the main page's content:
<div class="container-fluid">
<div class="row">
<!-- Sales Order # -->
<div class="col-xs-6 col-md-2 sp-sales-order">
<div ng-controller="tabTitleCtrl">
<div class="sp-header-text">
{{subtitle}}
</div>
<div>
{{title}}
</div>
</div>
</div>
<!-- Button Block -->
<div class="col-xs-6 col-md-4 col-md-push-4 sp-sales-button">
<div ng-include="toolbarPath">
</div>
</div>
<!-- Totals -->
<div class="col-xs-6 col-xs-push-6 col-md-2 col-md-push-4 sp-sales-total">
<div class="row">
<div class="col-sm-12 sp-header-text">
Total
</div>
<div class="col-sm-12">
{{Total | currency}}
</div>
</div>
</div>
<!-- Customer Input Box -->
<div class="col-xs-6 col-xs-pull-6 col-md-3 col-md-offset-1 col-md-pull-6 sp-sales-customer">
<div ng-include="headerPath"></div>
</div>
</div>
</div>
Try this. I built it from scratch to get away from the extra classes in your code so you could clearly see what's going on. I'm basically just relying on Bootstrap to stack the cols for me at different display widths - without overdoing the classes.
I think this is what you're going for.
Here's a Fiddle
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
Invoice
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<button class="btn btn-default">Void</button>
<button class="btn btn-default">Post</button>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="form-group">
<select class="form-control">
</select>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
Totals
</div>
</div>
</div>