I know this has been asked many times but I've tried pretty much anything I've read so far.
I want to align both horizontally and vertically an img inside a div.
The container div is inside a modal showing the picture, once clicked its preview. Then it will contain pictures with any size.
I can align horizontally OR vertically but not both.
HTML code: https://pastebin.com/7dCQ1aJg
<div id="mypicmodal" class="col-lg-12 col-md-12 col-sm-12 content">
<div class="row content">
<div class="col-lg-1 col-md-1"></div>
<div class="col-lg-10 col-md-10 col-sm-12 content">
<div class="row content">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="col-lg-12 col-md-12 col-sm-12 modal-content">
<div class="row content">
<div id="modalpiccontainer" class="col-lg-8 col-md-8 col-sm-12 content" style="background-color:black">
<div class="row content">
<!-- pic here -->
<img id="pic" src="">
</div>
</div>
<div id="modalpicdata" class="col-lg-4 col-md-4 col-sm-12 content">
<div class="row content">
<div id="modaluserdata" class="col-lg-12">
<div class="row content">
<div id="modaluserpic" class="col-lg-3 col-md-3 col-sm-3 content" style="background-color:yellow">
</div>
<div id="modaluserpicinfo" class="col-lg-9 col-md-3 col-sm-3 content" style="backround-color:green">
</div>
</div>
</div>
<div id="modalsocial" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modalcomments" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modaltypecomment" class="col-lg-12">
<div class="row content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Modal example (with img not aligned vertically): https://ibb.co/j4nJ1Q
(.content only contains "height: inherit" and the modal is 550px)
Thank you!
Easy with Flexbox :
div.container{
width: 500px;
height: 400px;
border: red dashed 2px;
display: flex;
justify-content: center;
align-items : center;
}
<div class="container">
<img src="http://lorempixel.com/300/200/"/>
</div>
Related
Hi I have the next strucutre in a web:
<section class="item-list clearfix jq-itemList">
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
</section>
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
</section>
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
</section>
</section>
How I can iterate over the nested sections inside the parent section with pure javascript?
I tried with something like:
document.getElementById("section").getElementsByTagName("section");
but is not working, what is the best approach?
Thanks!
Use queryselector and use css selector section section :
document.querySelectorAll('section section').forEach(e => {
const id = e.getAttribute('data');
console.log(id);
});
<section class="item-list clearfix jq-itemList">
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
</section>
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
</section>
<section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
</section>
</section>
Keep in mind that id should be unique to the element, you might want to consider changing the ids of the sections.
Using non unique id is illegal and will cause many problems. Use name attribute instead with querySelector
sections= document.querySelectorAll('section section[name=cart-section]');
sections.forEach(s=> console.log(s.getAttribute('data')) );
sections = document.querySelectorAll('section section[name=cart-section]');
sections.forEach(s => console.log(s.getAttribute('data')));
<section class="item-list clearfix jq-itemList">
<section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
</section>
<section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
</section>
<section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
</section>
</section>
Actually, my web page has 2 div tags which are vertically separated using col-md values. Its like <div class="col-md-6"> and <div class="col-md-6">. Right now both the divs are aligned side-by-side. .
But when I minimize the browser window, then both the divs are aligned one by one.
Code Snippet here:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title"><strong>Virtual Document 1</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
<ay-column field="name" header="Name" ></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title " ><strong>Virtual Document 2</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
<ay-column field="name" header="Name"></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
</div>
</div>
My question, could anyone suggest me how to retain the position of the divs?
This is your code with the change 'col-md-6' to 'col-6'. I just linked the latest bootstrap css and its working perfect(side by side). Hope this can help you.
.col-6{
border: solid 1px red;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title"><strong>Virtual Document 1</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
<ay-column field="name" header="Name" ></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
<div class="col-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title " ><strong>Virtual Document 2</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
<ay-column field="name" header="Name"></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
</div>
</div>
try this, this will work
<div class="row">
<div class="col col-6">
//first content
</div>
<div class="col col-6">
//second content
</div>
</div>
for more details about this document as #tico suggested.
Edit
Even though this is not a good idea but you said the top one is not working in your case.I know this not suggestible but try this once
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
//first content
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
//second content
</div>
</div>
I would like to target only the classes "Front" and "Back" of the "Flip-tile" that I am currently hovering over. How do you solve this with javascript, currently it is toggling them all at the same time.
The HTML:
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Back side</span></h4>
</div>
</div>
</div>
</div>
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Backside</span></h4>
</div>
</div>
</div>
</div>
The Javascript:
$(".flip-tile").hover(function() {
$(".front").hide()
$(".back").show()},
function() {
$(".back").hide()
$(".front").show()
});
It's so easy using find() on jQuery, but you can make it on easiest way with CSS.
Javascript:
$(".flip-tile").hover(function() {
$(this).find(".front").hide();
$(this).find(".back").show();
},
function() {
$(this).find(".back").hide();
$(this).find(".front").show();
}
);
CSS solution
.flip-title .front {
display: block;
}
.flip-title .back {
display: none;
}
.flip-title:hover .front {
display: none;
}
.flip-title:hover .back {
display: block;
}
Use $(this).find(...).
$(".flip-tile").hover(function() {
$(this).find(".front").hide()
$(this).find(".back").show()},
function() {
$(this).find(".back").hide()
$(this).find(".front").show()
});
Please take a look on https://api.jquery.com/class-selector/
I.e.
<script>
$( ".myclass.otherclass" ).css( "border", "13px solid red" );
</script>
The example will apply the border style to any .myclass.otherclass items along the HTML
good luck!
Try this:-
$(".flip-tile").hover(function() {
$(this).find(".front").hide()
$(this).find(".back").show()},
function() {
$(this).find(".back").hide()
$(this).find(".front").show()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Back side</span></h4>
</div>
</div>
</div>
</div>
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Backside</span></h4>
</div>
</div>
</div>
</div>
I am currently working on an application where the user gets a list a bunch of divs with details on them, there are also hidden details in each div that can be toggled by the user. The issue is that when you click on "details" for one box it toggles the class on all boxes rather than just within the one that was clicked. I was looking for an answer to this issue and have come up with trying to auto-increment the ID's/Class so that each box that is created will have a unique identifier. I need to make it so that the "extra-details" is only opened in relation to the card "details" is clicked on. Thank you in advance for any help.
My Code
$(".card-details").on("click", function (e) {
e.preventDefault();
$(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>
$(this).siblings('.extra-details').toggleClass('hidden') will achieve what you want.
Also note, your 'details' element is not actually a link, only styled like one, so you don't need the e.preventDefault() line.
Try:
$(".card-details").on("click", function (e) {
e.preventDefault();
$(this).siblings(".extra-details").toggleClass("hidden");
});
This works for me.
I just changed the javascript code as shown below.
$(".card-details").click(function() {
$(this).closest(".card").find(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>
I need help to change bootstrap column order inside php loop which counts two div`s (with class product). Each two divs (with class product) in loop contains two bootstrap columns (divs with class image and class description) with same order and then next two divs (with class product) has reverse order of bootstrap columns inside (divs with class description and class image).
The concept in php loop goes like this:
DIV_1 (Image + Description) DIV_2 (Image + Description)
DIV_3 (Description + Image) DIV_4 (Description)
and etc. in php loop
Everything works well on desktop but on mobile devices I would like to have normal layout on scroll where all div`s will have IMAGE first and then Description.
Full code:
<section class="products">
<div class="container">
<?php $sl=1; ?>
<?php if(($sl==1)||($sl==2)) { ?>
<div class="product col-lg-6 col-md-12 col-sm-12">
<div class="image col-lg-6 col-md-6 col-sm-12">
<a href="#" class="moreLink">
<img src="" alt="" />
</a>
</div>
<div class="description col-lg-6 col-md-6 col-sm-12">
<div class="product-description left-triangle">
<h3>Product Title</h3>
<p>Description text goes here...</p>
Details
</div>
</div>
</div>
<?php
$sl++;
}
else
{ ?>
<div class="product col-lg-6 col-md-12 col-sm-12">
<div class="description col-lg-6 col-md-6 col-sm-12">
<div class="product-description right-triangle">
<h3>Product Title</h3>
<p>Description text goes here...</p>
Details
</div>
</div>
<div class="image col-lg-6 col-md-6 col-sm-12">
<a href="#" class="moreLink">
<img src="" alt="" />
</a>
</div>
</div>
<?php if($sl==3)
$sl++;
else
$sl=1; } ?>
</div>
</section>
the easiest way - use css flexbox
https://css-tricks.com/almanac/properties/o/order/
Flexbox make sense if I change flex-item classes for divs in loop with class product (class flex-container). If I use flex-item-a and flex-item-b for bootstrap columns (with class image and with class description).
Is this solution mobile/tablet cross-browser ready?
<section class="products">
<div class="container">
<?php $sl=1; ?>
<?php if(($sl==1)||($sl==2)) { ?>
<div class="product col-lg-6 col-md-12 col-sm-12 flex-container">
<div class="image col-lg-6 col-md-6 col-sm-12 flex-item-a">
<a href="#" class="moreLink">
<img src="" alt="" />
</a>
</div>
<div class="description col-lg-6 col-md-6 col-sm-12 flex-item-a">
<div class="product-description left-triangle">
<h3>Product Title</h3>
<p>Description text goes here...</p>
Details
</div>
</div>
</div>
<?php
$sl++;
}
else
{ ?>
<div class="product col-lg-6 col-md-12 col-sm-12 flex-container">
<div class="description col-lg-6 col-md-6 col-sm-12 flex-item-b">
<div class="product-description right-triangle">
<h3>Product Title</h3>
<p>Description text goes here...</p>
Details
</div>
</div>
<div class="image col-lg-6 col-md-6 col-sm-12 flex-item-b">
<a href="#" class="moreLink">
<img src="" alt="" />
</a>
</div>
</div>
<?php if($sl==3)
$sl++;
else
$sl=1; } ?>
</div>
</section>
with css style:
.flex-container {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width:100%;
}
.flex-item-a:nth-of-type(1), .flex-item-b:nth-of-type(2) { order: 1; }
.flex-item-a:nth-of-type(2), .flex-item-b:nth-of-type(1) { order: 2; }
.flex-item-a, .flex-item-b { width: 100%; height:auto; }