how to make 3 tiles in one row in bootstrap

i want to show 3 tiles in a one row. 3 tiles should come in one row in the mobile view also.now im able to see only 3 tiles in one row but in mobile its showing two tiles in a row. how to make 3 tiles should cover complete row and same 3 tiles i need to show mobile also .im using adminlte theme for the design

code pen

https://codepen.io/krishnakernel/pen/VQQyaV

 <div class="row">
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>64 &#8451;<sup style="font-size: 20px"></sup></h3>
                        <p><span>Oil Temperature</span></p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-thermometer-3"></i>
                    </div>
                    <a href="#" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>88<span style="font-size:30px">Amp</span></h3>
                        <p>R Current </p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-flash"></i>
                    </div>
                    <a href="" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3>233 <span style="font-size:20px">&#9889;</span> </h3>
                        <p>R Voltage in kva</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-bolt"></i>
                    </div>
                    <a href="#" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            </div>

Solution

Try changing the classes to col-xs-4 for all the elements you want to have displayed in a row.