Use the following javascript snippet to access the Users location.
var x = document.getElementById("pos"); function getLocation() {
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation not enabled.";
} }
function processPosition(position) {
x.innerHTML = "Lat: " +
position.coords.latitude + "<br>Long: " +
position.coords.longitude;
}
By navigator.geolocation the user will be asked for permission to share the location. navigator.geolocation.getCurrentPosition(showPosition) retrieves the location and passes it to the callback function showposition. In the position.coords object lat and long can be accessed, displayed or sent to a server via REST.
Use Boostrap, it introduces screen size dependent css classes. Boostraps grid divides the screen in 12 units. With this example you can have a screen layout that automatically stacks the divs if the screen width is below 768px.
<div class="container-fluid"> <div class="row">
<div class="col-sm-4" style="background-color:green;">.col-sm-4</div> <div class="col-sm-4" style="background-color:red;">.col-sm-4</div> <div class="col-sm-4" style="background-color:green;">.col-sm-4</div>
</div>
</div>