Layout using Bootstrap and Div - html

Question

I'm trying to build a company intranet page, with a "grid" style layout. In the past I've used tables, however I know that these are extremely problematic when used for layouts, hence I am attempting to construct the layout using bootstrap and Divs - however it's proving problematic.
Ultimately what I'm trying to achieve in the top right hand corner of the page is:
However what I'm ACTUALLY rendering is the following:
Ignoring the fact that the weather data is a little more expanded, I'm struggling to get the desired result and am really tempted to revert back to tables to get this thing to line up!
Here is the code that I am using on the main template page:
<div class="row">
<div class="col-sm-3">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-5">
<img src="~/Content/Images/companylogo.png" style="float: right; padding-right: 15px; padding-bottom:25px;"/>
<div style="padding-top:25px; border-bottom: 1px solid black;">
<div id="weatherDiv" style="float:left;"></div>
<div id="dateDiv" style="float:right; padding-right:10px; vertical-align: bottom;"></div>
</div>
</div>
</div>
And then upon page load, the two DIVs (weatherDiv & dateDiv) are filled in using AJAX:
WeatherDiv:
<div id="weatherDiv" style="float:left;">
<link href="/Content/css/weather-icons.css" rel="stylesheet">
<link href="/Content/css/weather-icons-wind.css" rel="stylesheet">
<div>
<ul style="list-style: none; margin-left: 0px; padding-left:0px;">
<li>Brisbane - Hot and sunny - 32c <i class="wi wi-day-sunny"></i></li>
<li>Melbourne - Early shower or two - 17c <i class="wi wi-showers"></i></li>
</ul>
</div>
</div>
DateDiv:
<div id="dateDiv" style="float:right; padding-right:10px; vertical-align: bottom;">
<h4>Friday, 20 November 2015</h4>
</div>
I understand totally that my use of CSS, Bootstrap & Divs are almost laughable, however the above is a result of hours of trying and trying!
Any help is much appreciated.

Answer 1

It's hard to be exactly sure how you want this layout to work on mobile. But here is a jsfiddle I've created that could help.
https://jsfiddle.net/2dqqajs1/
body {
min-width: 320px;
}
.text-right img{
display: inline-block;
}
/*extra small screens only*/
#media (max-width: 767px) {
#weatherDiv{
text-align: right;
}
}
hr {
margin: 0;
border-top: solid 2px #e0e0e0;
}
<div class="container">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-12 text-right">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=CompanyLogo&w=400&h=100" class="img-responsive" />
</div>
</div>
<div class="row">
<div id="dateDiv" class="col-xs-12 col-sm-5 col-sm-push-7 text-right">
<h4>Friday</span>, 20 Nov<span class="hidden-xs hidden-sm">ember</span> 2015</h4>
</div>
<div id="weatherDiv" class="col-xs-12 col-sm-7 col-sm-pull-5">
<ul style="list-style: none; margin-left: 0px; padding-left:0px;">
<li>Bris<span class="hidden-sm">bane</span> <span class="hidden-xs">- Hot and sunny </span>- 32c <i class="fa fa-sun-o"></i></li>
<li>Melb<span class="hidden-sm">ourne</span> <span class="hidden-xs">- Early shower or two </span>- 17c <i class="fa fa-cloud"></i></li>
</ul>
</div>
<div class="col-xs-12"><hr/></div>
</div>
</div>
</div>
</div>