/    Sign up×
Community /Pin to ProfileBookmark

CSS Bootstrap 3 column reordering/ resizing

Copy linkTweet thisAlerts:
Dec 30.2019

I have 3 columns; first being product title , the second being description, the third being price

on or from a device screen width of >= 768px (col-md) I wish to display the columns in the form of:

title description price

but with device screen widths of less then 768px (sm and xs) to take form of

title price
description

I have this done using a combination of an IF statement in PHP and using JQuery AJAX to pick up the client screen width, but the page is glitchy/ blinks/ flashes/ bounces up and down etc.

I’ve looked at CSS push/ pull classes but I haven’t grasped how to use it to gain what I want

All I got so far is as follow:

[code]
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container-fluid”>
<div class=”row”>
<div class=”col-sm-4″ style=”background-color:red;”>title</div>
<div class=”col-sm-6″ style=”background-color:lavender;”>descripton</div>
<div class=”col-sm-2″ style=”background-color:lavenderblush;”>price</div>
</div>
</div>
[/code]

but this on small devices drop one below the other in form of:

title
description
price

any pointers, advice and/ or solution would be much appreciated. Thanks and also happy new years in advance

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ib_mintJan 01.2020 — My solution:

``<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width"&gt;
&lt;title&gt;My Site&lt;/title&gt;
&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"&gt;
&lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container-fluid"&gt;
&lt;div class="row"&gt;
&lt;div class="col-sm-4 col-xs-6" style="background-color:red;"&gt;title&lt;/div&gt;
&lt;div class="col-sm-2 col-xs-6 col-sm-push-6" style="background-color:lavenderblush;"&gt;price&lt;/div&gt;
&lt;div class="col-sm-6 col-xs-12 col-sm-pull-2" style="background-color:lavender;"&gt;descripton&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="script.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;<i>
</i>``
I hope it works for you.
Copy linkTweet thisAlerts:
@nsathauthorJan 05.2020 — @ib_mint#1612395

I've somewhat achieved what I'm looking for but it works as wished only on screen widths up to (& including 767px) using the following

<i>
</i> &lt;div class="col-xs-9 col-sm-9 col-md-3 col-lg-3 col-xl-3" style="background-color:red;"&gt;
title
&lt;/div&gt;
<br/>
&lt;div class="col-xs-3 col-sm-3 col-sm-push-7 col-md-2 col-lg-2 col-xl-3" style="background-color:lavenderblush;"&gt;
price
&lt;/div&gt;

&lt;div class="col-xs-12 col-sm-12 col-sm-pull-2 col-md-7 col-lg-7 col-xl-7" style="background-color:lavender;"&gt;
description
&lt;/div&gt;


from 768px up to 992px, the div's are sort of all over the place. is there a way that you know of that can possibly solve this?
Copy linkTweet thisAlerts:
@ib_mintJan 05.2020 — > @nsath#1612520 from 768px up to 992px, the div's are sort of all over the place. is there a way that you know of that can possibly solve this?

A possible solution:
``<i>
</i> &lt;div class="container-fluid"&gt;
&lt;div class="row"&gt;
&lt;div class="col-xs-9 col-sm-9 col-md-3 col-lg-3 col-xl-3" style="background-color:red;"&gt;
title
&lt;/div&gt;
&lt;div class="col-xs-3 col-sm-3 col-md-push-7 col-md-2 col-lg-2 col-xl-3" style="background-color:lavenderblush;"&gt;
price
&lt;/div&gt;
&lt;div class="col-xs-12 col-sm-12 col-md-pull-2 col-md-7 col-lg-7 col-xl-7" style="background-color:lavender;"&gt;
description
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;<i>
</i>``
Copy linkTweet thisAlerts:
@nsathauthorJan 05.2020 — @ib_mint#1612522

brilliant! thanks ever so much
Copy linkTweet thisAlerts:
@sathwikboddu55Jan 07.2020 — [koplayer](https://besttechytricks.com/ko-player)

[koplayer download](https://besttechytricks.com/ko-player)

[koplayer apk](https://besttechytricks.com/ko-player)

[koplayer for android](https://besttechytricks.com/ko-player)

check website and comment your reviews.
×

Success!

Help @nsath spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...