Placing second column on top when page is resized

up vote
0
down vote

favorite

I am trying to make a responsive design on the page using bootstrap grid. Here is my HTML:

<div class="row row-2">
 <div class = "col-sm-4 col-sm-offset-2">
 <img class="img-responsive header-notebookImg" src="Images/header/notebook.png" alt="">
 </div>
 <div class="col-sm-4 body-slogan">
 <p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas whth this application</p>
 </div>
 </div>

The css file only contains fonts and sizes. My question is: When I resize the page to trigger bootstrap extra small coloumn class is it possible to put the second coloumn on the top?

With code above the second coloumn goes on the bottom. I can't interchange the content of the coloumns as I want first coloumn to be on the left on the bigger screan.
Thanks in advance!

asked Nov 8 at 10:37

boandriy

223214

1

Are you really use Bootstrap 3 or 4?
– Christopher Dosin
Nov 8 at 10:43

I use bootstrap 3.3.7 on the page
– boandriy
Nov 8 at 11:19

add a comment |

up vote
0
down vote

favorite

I am trying to make a responsive design on the page using bootstrap grid. Here is my HTML:

<div class="row row-2">
 <div class = "col-sm-4 col-sm-offset-2">
 <img class="img-responsive header-notebookImg" src="Images/header/notebook.png" alt="">
 </div>
 <div class="col-sm-4 body-slogan">
 <p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas whth this application</p>
 </div>
 </div>

The css file only contains fonts and sizes. My question is: When I resize the page to trigger bootstrap extra small coloumn class is it possible to put the second coloumn on the top?

With code above the second coloumn goes on the bottom. I can't interchange the content of the coloumns as I want first coloumn to be on the left on the bigger screan.
Thanks in advance!

asked Nov 8 at 10:37

boandriy

223214

1

Are you really use Bootstrap 3 or 4?
– Christopher Dosin
Nov 8 at 10:43

I use bootstrap 3.3.7 on the page
– boandriy
Nov 8 at 11:19

add a comment |

up vote
0
down vote

favorite

I am trying to make a responsive design on the page using bootstrap grid. Here is my HTML:

<div class="row row-2">
 <div class = "col-sm-4 col-sm-offset-2">
 <img class="img-responsive header-notebookImg" src="Images/header/notebook.png" alt="">
 </div>
 <div class="col-sm-4 body-slogan">
 <p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas whth this application</p>
 </div>
 </div>

The css file only contains fonts and sizes. My question is: When I resize the page to trigger bootstrap extra small coloumn class is it possible to put the second coloumn on the top?

With code above the second coloumn goes on the bottom. I can't interchange the content of the coloumns as I want first coloumn to be on the left on the bigger screan.
Thanks in advance!

asked Nov 8 at 10:37

boandriy

223214

I am trying to make a responsive design on the page using bootstrap grid. Here is my HTML:

<div class="row row-2">
 <div class = "col-sm-4 col-sm-offset-2">
 <img class="img-responsive header-notebookImg" src="Images/header/notebook.png" alt="">
 </div>
 <div class="col-sm-4 body-slogan">
 <p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas whth this application</p>
 </div>
 </div>

The css file only contains fonts and sizes. My question is: When I resize the page to trigger bootstrap extra small coloumn class is it possible to put the second coloumn on the top?

With code above the second coloumn goes on the bottom. I can't interchange the content of the coloumns as I want first coloumn to be on the left on the bigger screan.
Thanks in advance!

html css twitter-bootstrap-3

asked Nov 8 at 10:37

boandriy

223214

asked Nov 8 at 10:37

boandriy

223214

asked Nov 8 at 10:37

boandriy

223214

asked Nov 8 at 10:37

boandriy

223214

asked Nov 8 at 10:37

boandriy

223214

1

Are you really use Bootstrap 3 or 4?
– Christopher Dosin
Nov 8 at 10:43

I use bootstrap 3.3.7 on the page
– boandriy
Nov 8 at 11:19

add a comment |

1

Are you really use Bootstrap 3 or 4?
– Christopher Dosin
Nov 8 at 10:43

I use bootstrap 3.3.7 on the page
– boandriy
Nov 8 at 11:19

Are you really use Bootstrap 3 or 4?
– Christopher Dosin
Nov 8 at 10:43

I use bootstrap 3.3.7 on the page
– boandriy
Nov 8 at 11:19

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

If you're using Bootstrap 4 it's pretty simple with flex-direction: column-reverse;.

Here's a simple example with Bootstrap 4. Just wrap the row's into a container with display: flex; and give it a flex-direction: column-reverse;`.

.row 
 background: #f8f9fa;
 margin-top: 20px;


.reverse 
 display: flex;
 flex-direction: column-reverse;


.col 
 border: solid 1px #6c757d;
 padding: 10px;


/* Desktop View */
@media (min-width: 1281px) 
 
 .reverse 
 flex-direction: column;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="reverse">
 <div class="row">
 <div class="col">
 Row 1
 </div>
 </div>
 <div class="row">
 <div class="col">
 Row 2
 </div>
 </div> 
 </div>
</div>

answered Nov 8 at 10:50

Christopher Dosin

1666

is it possible with bootstrap 3.3.7?
– boandriy
Nov 8 at 11:19

Ehm ... sorry ... But why don't you just try it? ....
– Christopher Dosin
2 days ago

Tryed, thanks for the answer but on bootstrap 3.3.7 it is not working.
– boandriy
2 days ago

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53205964%2fplacing-second-column-on-top-when-page-is-resized%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

If you're using Bootstrap 4 it's pretty simple with flex-direction: column-reverse;.

Here's a simple example with Bootstrap 4. Just wrap the row's into a container with display: flex; and give it a flex-direction: column-reverse;`.

.row 
 background: #f8f9fa;
 margin-top: 20px;


.reverse 
 display: flex;
 flex-direction: column-reverse;


.col 
 border: solid 1px #6c757d;
 padding: 10px;


/* Desktop View */
@media (min-width: 1281px) 
 
 .reverse 
 flex-direction: column;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="reverse">
 <div class="row">
 <div class="col">
 Row 1
 </div>
 </div>
 <div class="row">
 <div class="col">
 Row 2
 </div>
 </div> 
 </div>
</div>

answered Nov 8 at 10:50

Christopher Dosin

1666

is it possible with bootstrap 3.3.7?
– boandriy
Nov 8 at 11:19

Ehm ... sorry ... But why don't you just try it? ....
– Christopher Dosin
2 days ago

Tryed, thanks for the answer but on bootstrap 3.3.7 it is not working.
– boandriy
2 days ago

add a comment |

up vote
1
down vote

If you're using Bootstrap 4 it's pretty simple with flex-direction: column-reverse;.

Here's a simple example with Bootstrap 4. Just wrap the row's into a container with display: flex; and give it a flex-direction: column-reverse;`.

.row 
 background: #f8f9fa;
 margin-top: 20px;


.reverse 
 display: flex;
 flex-direction: column-reverse;


.col 
 border: solid 1px #6c757d;
 padding: 10px;


/* Desktop View */
@media (min-width: 1281px) 
 
 .reverse 
 flex-direction: column;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="reverse">
 <div class="row">
 <div class="col">
 Row 1
 </div>
 </div>
 <div class="row">
 <div class="col">
 Row 2
 </div>
 </div> 
 </div>
</div>

answered Nov 8 at 10:50

Christopher Dosin

1666

is it possible with bootstrap 3.3.7?
– boandriy
Nov 8 at 11:19

Ehm ... sorry ... But why don't you just try it? ....
– Christopher Dosin
2 days ago

Tryed, thanks for the answer but on bootstrap 3.3.7 it is not working.
– boandriy
2 days ago

add a comment |

up vote
1
down vote

If you're using Bootstrap 4 it's pretty simple with flex-direction: column-reverse;.

Here's a simple example with Bootstrap 4. Just wrap the row's into a container with display: flex; and give it a flex-direction: column-reverse;`.

.row 
 background: #f8f9fa;
 margin-top: 20px;


.reverse 
 display: flex;
 flex-direction: column-reverse;


.col 
 border: solid 1px #6c757d;
 padding: 10px;


/* Desktop View */
@media (min-width: 1281px) 
 
 .reverse 
 flex-direction: column;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="reverse">
 <div class="row">
 <div class="col">
 Row 1
 </div>
 </div>
 <div class="row">
 <div class="col">
 Row 2
 </div>
 </div> 
 </div>
</div>

answered Nov 8 at 10:50

Christopher Dosin

1666

If you're using Bootstrap 4 it's pretty simple with flex-direction: column-reverse;.

Here's a simple example with Bootstrap 4. Just wrap the row's into a container with display: flex; and give it a flex-direction: column-reverse;`.

.row 
 background: #f8f9fa;
 margin-top: 20px;


.reverse 
 display: flex;
 flex-direction: column-reverse;


.col 
 border: solid 1px #6c757d;
 padding: 10px;


/* Desktop View */
@media (min-width: 1281px) 
 
 .reverse 
 flex-direction: column;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="reverse">
 <div class="row">
 <div class="col">
 Row 1
 </div>
 </div>
 <div class="row">
 <div class="col">
 Row 2
 </div>
 </div> 
 </div>
</div>

.row 
 background: #f8f9fa;
 margin-top: 20px;


.reverse 
 display: flex;
 flex-direction: column-reverse;


.col 
 border: solid 1px #6c757d;
 padding: 10px;


/* Desktop View */
@media (min-width: 1281px) 
 
 .reverse 
 flex-direction: column;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="reverse">
 <div class="row">
 <div class="col">
 Row 1
 </div>
 </div>
 <div class="row">
 <div class="col">
 Row 2
 </div>
 </div> 
 </div>
</div>

.row 
 background: #f8f9fa;
 margin-top: 20px;


.reverse 
 display: flex;
 flex-direction: column-reverse;


.col 
 border: solid 1px #6c757d;
 padding: 10px;


/* Desktop View */
@media (min-width: 1281px) 
 
 .reverse 
 flex-direction: column;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="reverse">
 <div class="row">
 <div class="col">
 Row 1
 </div>
 </div>
 <div class="row">
 <div class="col">
 Row 2
 </div>
 </div> 
 </div>
</div>

answered Nov 8 at 10:50

Christopher Dosin

1666

answered Nov 8 at 10:50

Christopher Dosin

1666

answered Nov 8 at 10:50

Christopher Dosin

1666

answered Nov 8 at 10:50

Christopher Dosin

1666

is it possible with bootstrap 3.3.7?
– boandriy
Nov 8 at 11:19

Ehm ... sorry ... But why don't you just try it? ....
– Christopher Dosin
2 days ago

Tryed, thanks for the answer but on bootstrap 3.3.7 it is not working.
– boandriy
2 days ago

add a comment |

is it possible with bootstrap 3.3.7?
– boandriy
Nov 8 at 11:19

Ehm ... sorry ... But why don't you just try it? ....
– Christopher Dosin
2 days ago

Tryed, thanks for the answer but on bootstrap 3.3.7 it is not working.
– boandriy
2 days ago

is it possible with bootstrap 3.3.7?
– boandriy
Nov 8 at 11:19

Ehm ... sorry ... But why don't you just try it? ....
– Christopher Dosin
2 days ago

Tryed, thanks for the answer but on bootstrap 3.3.7 it is not working.
– boandriy
2 days ago

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Dfyjkt