Trouble keeping the rows and columns line up

**mp5163093** · 01-12-2017, 07:31 PM

I am having trouble keeping the rows and columns line up

1) When is desktop mode maximum columns should be three.
When I click on “Cell Three” works fine but when I click on ”Cell Two” it does loose the three column order.

2) When Tablet maximum columns should be two all the time.
When I click on "Cell Two" works fine but when I click on "Cell Three" it does loose the two column order.

When Mobile maximum is one column.
3) It does work fine

I paste the whole code in one file hoping it will be easier to follow, my apologies if is hard to read
Let me know if I am clear with my explanation plz, in advance thank you for your help!

Code:

<!DOCTYPE html>
    <!-- include bootstrap -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
    vertical-align: top;
}
.col-fixed {
    /* custom width */
    width:320px;
}
.col-min {
    /* custom min width */
    min-width:320px;
}
.col-max {
    /* custom max width */
    max-width:320px;
}
.item {
    width:100%;
    height:100%;
	border:1px solid #cecece;
    padding:16px 8px;
	background:#ededed;
	background:-webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
	background:-moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
	background:-ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
}
/* content styles */
.item {
	display:table;
}
.content {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.content:before {
    font-family:sans-serif;
    font-size:12px;
    letter-spacing:1px;
    color:#747474;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}
</style>
<div class="container">
    <div class="row row-centered">
<!-- Cell One -->
        <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell One</div></div></div>
<!-- Cell Two -->        
        <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content"><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'ImageMngt')">Cell Two</a></div></div></div>        
         <div id="ImageMngt" class="tabcontent">       
                <b>Content Cell Two</b><br />
                Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two
        </div>
<!-- Cell Three -->              
        <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content"><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'ImageOff')">Cell Three</a></div></div></div>
            <div id="ImageOff" class="tabcontent"><b>Content Three</b><br />
                Content Three Content Three Content Three Content Three Content Three Content Three Content Three Content Three Content Three
            </div>
<!-- Cell Four-->  
        <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Four</div></div></div>
<!-- Cell Five-->
         <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Five</div></div></div>
<!-- Cell Six -->        
         <div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Six</div></div></div>
</div>
</div>
<script>
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>