I got a problem that I know the solution should be very simple but so far I can't seem to find the proper way to achieve this specific behaviour, basically I'm trying to move an image at the top of another div that contains some information on page resize, it's mandatory that I'm using bootstrap. I've already tried to add grid system such as col-md-6 or col-md 12 but nothing is working as I wanted..
Here is my Plunker can anyone help me out please? Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XYZ</title>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
var news = [];
$(document).ready(function(){
$.ajax({
url: 'getNewsPage.json',
async: false,
dataType: 'json',
success: function (data){
var stringLayoutOne="";
stringLayoutOne += "<div class='media'><div class='media-left'><img style='width: 300px; border: 1px solid' class='media-object' src='"+ data.news[0].img +"'></div><div style='border: 1px solid' class='media-body'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title + "</h2>"+ data.news[0].body +"</div></div>";
var stringLayoutTwo = "<div class='media'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title + "</h2><div class='media-left'><img style='width: 300px; border: 1px solid' class='media-object' src='"+ data.news[0].img +"'></div><div style='border: 1px solid' class='media-body'>"+ data.news[0].body +"</div></div>";
var stringLayoutFour = "<div class='media'><div style='border: 1px solid' class='media-body'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title +"</h2>"+ data.news[0].body +"</div><div class='media-right'><img class='media-object' src=' "+ data.news[0].img +"'style='width: 300px; border: 1px solid'></div></div>";
var stringLayoutThree = "<div class='media'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title +"</h2><div style='border: 1px solid' class='media-body'>"+ data.news[0].body +"</div><div class='media-right'><img class='media-object' src=' "+ data.news[0].img +"'style='width: 300px; border: 1px solid'></div></div>";
$("#newsLayoutOne").html(stringLayoutOne);
//$("#newsLayoutTwo").html(stringLayoutTwo);
//$("#newsLayoutThree").html(stringLayoutThree);
//$("#newsLayoutFour").html(stringLayoutFour);
},
error: function(data){
console.log(data);
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Pagina news</h1>
</div>
</div>
<div class="container" id="newsLayoutOne">
</div> 
<div class="container" id="newsLayoutTwo">
</div> 
<div class="container" id="newsLayoutThree">
</div> 
<div class="container" id="newsLayoutFour">
</div> 
</body>
</html>