Bootstrap - How can I move a row's div into another row? - html

Question

I'm learing bootstrap and I'm working with the Grid System since I'm working to a responsive website with lots of tables.
<div class="row">
<div class="col-md-1">A</div>
<div class="col-md-1">B</div>
<div class="col-md-1">C</div>
</div>
<div class="row">
<div class="col-md-1">D</div>
<div class="col-md-1">E</div>
<div class="col-md-1">F</div>
</div>
I will start with this bootstrap "table". I want to move a div of the first row into the second row. Example:
<div class="row">
<div class="col-md-1">A</div>
<div class="col-md-1">B</div>
</div>
<div class="row">
<div class="col-md-1">C</div>
<div class="col-md-1">D</div>
<div class="col-md-1">E</div>
<div class="col-md-1">F</div>
</div>

Answer 1

I think you are misunderstanding how Bootstrap works. Its grid does not work by "moving a row's div into another row". What happens is that the grid is based off of 12 columns per row. If you want 3 elements in 1 row, you would set each one with a class of col-xx-4 (xx is either lg, md, sm or xs), since 12/4 = 3. Each element takes up 4 of the 12 columns.
For your issue at hand - you can put all 6 elements in the same row and adjust the number of columns each one spans based on the screen size using lg, md, sm and xs. Below is an example that does what I believe you are trying to do my manually moving a row's div, but this way utilizes Bootstrap's grid system correctly.
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6">
A
</div>
<div class="col-sm-4 col-xs-6">
B
</div>
<div class="col-sm-4 col-xs-6">
C
</div>
<div class="col-sm-4 col-xs-6">
D
</div>
<div class="col-sm-4 col-xs-6">
E
</div>
<div class="col-sm-4 col-xs-6">
F
</div>
</div>
</div>
Here is a Demo JSFiddle
You can slide the screen to make it bigger/smaller and see the 2 rows of 3 collapse to 3 rows of 2, and vice-versa.

Answer 2

If I got what you wanted to ask, the simplest way to do it is by:
1) Checking the browser's width.
2) Then, get the inner element you want to move.
3) Add it to where you want to take it.
4) And remove it from it was before.
The code HTML:
<div class="row" id="row1">
<div class="col-md-1">
A
</div>
<div class="col-md-1">
B
</div>
<div class="col-md-1" id="moveto">
</div>
</div>
<div class="row" id="row2">
<h4>--</h4>
<div class="col-md-1" id="movefrom">
C
</div>
<div class="col-md-1">
D
</div>
<div class="col-md-1">
E
</div>
<div class="col-md-1">
F
</div>
</div>
The JS code:
$(document).ready(function() {
var x = document.getElementById("movefrom").innerHTML // Get the inner HTML (C in this case)
if (window.innerWidth <= 768) { // Check the browser's width
document.getElementById("moveto").innerHTML = x; // Move the element to where you want (moveto id)
document.getElementById("movefrom").innerHTML = "" // Replace the element by an empty string.
}
});
This was the most simple way I found to make it work.
Any feedback is great!
Good luck

Answer 3

It is my hobby to answer too late.
Do this if you want it to respond to resize and work both ways:
window.addEventListener("resize", function(event) {
//grab what to replace
var x = document.getElementById("social")
.innerHTML;
//for when going to smaller screen
if (window.innerWidth <= 560 && !x == "") {
document.getElementById("social-mobile")
.innerHTML = x;
document.getElementById("social")
.innerHTML = "";
}
var y = document.getElementById("social")
.innerHTML;
// if we are at bigger screen and node is "", then put it back
if (window.innerWidth >= 560 && y == "") {
document.getElementById("social")
.innerHTML = document.getElementById("social-mobile")
.innerHTML;
document.getElementById("social-mobile")
.innerHTML = "";
}
});
😎

Answer 4

Well, I have this simple jQuery function..
(function($){
$.fn.moveTo = function(selector){
return this.each(function(){
var cl = $(this).clone();
$(cl).prependTo(selector);
$(this).remove();
});
};
});
usage $('.element').moveTo('.element2');, you can also change it to appendTo, or send a parameter to change it.