Изменить панель поиска и показать позицию для мобильного просмотра

Question

Когда я переключаюсь на мобильное представление, панель поиска и панель отображения перемещаются в середину страницы. Я хочу, чтобы они выровнялись по правому краю страницы. Как я могу этого добиться? Я использую плагин Datatables.

Здесь размещен код https://jsfiddle.net/3k5p2q7g/

@{
    ViewData["Title"] = "Exception Logs";
}

<div class="content">
    <div class="box box-primary" ng-controller="logController" ng-init="init()">
        <div class="box-body">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h1>Exception Logs</h1>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <table class="table table-striped table-bordered" id="table_Logs">
                        <thead>
                            <tr>
                                <th>Time Stamp</th>
                                <th>Exception</th>
                                <th>Message</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {

    <script src="~/js/site/Logs/LogController.js"></script>

}

Answer 1

@media max-width: 767px {
.dataTables_filter, .dataTables_length {
    float:right !important;
}
}

Answer 2

Вы можете использовать CSS @ media для воздействия только на мобильные устройства (max-width = 767px).

CSS

@media max-width: 767px {
    .align-right {
        text-align: right;
    }
}

HTML

<div class="align-right">
    <div class="search">...</div>
    <div class="showbar">...</div>
</div>