You can wrap the icons in a container div and make both the #hourPantella span and the container div display: inline-block.

For example:

.icon {
  width: 25px;
  height: 25px;
  border: 1px solid black;
  
  display: inline-block;
}

.date, .icon-container {
  display: inline-block;
}

<div class="date">Date - Time</div>
<div class="icon-container">
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
</div>

And a JSFiddle example: https://jsfiddle.net/5a8o7ykd/.

Note that this example is not exactly like what you showed. I just used placeholder divs instead of actual icons and I didn’t actually put a date into the span. You should be able to adapt it to work with your code though.

Check if this is what you want?

@media (max-width: 900px) { 
  .block {
    display: block;
  }
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
    <span id="horaPantalla" class="block">Hour</span>
    <i class="fa fa-cogs imgButton" aria-hidden="true"></i>
    <i class="fa fa-camera imgButton" aria-hidden="true" id="configScan"></i>
</div>

In my website in the same <div>, I have a <span> with three buttons. This is how it looks like in front-end:

This is my HTML:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding" style="padding-bottom:15px;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
        <span id="horaPantalla"></span>
        <i class="fa fa-cogs imgButton" aria-hidden="true"></i>
        <i class="fa fa-camera imgButton" aria-hidden="true" id="configScan"></i>
        <i class="fa fa-sign-out imgButton" aria-hidden="true""></i>
     </div> 
</div>

If I access from my mobile phone I got this:

Two buttons are on the first line and then the other button is on the second line.

My goal is to fit all three buttons together, if the resolution is small I want to put all three buttons in a new row below the <span>.

I have tried the below by adding a class called resolution to the <i> elements:

.imgButton {
    font-size: 36px !important;
    /*padding: 2px;*/
    padding-bottom: 2px;
    cursor:pointer;
    background-color:#A3D1D4 !important;
    border:none !important;
}

@media screen and (max-width: 900px) {
  .resolution {
    float: none;
    width: 100%;
  }
}

This is what I get:

How can I put three <i> elements inline below the <span> on mobile devices?