Bootstrap und MediaQuerys funktioniert nicht

[color=#1C2837][size=2]Hallo Leute, zunächst veröffentliche ich 2Anhänge: Der Erste zeigt meine Applikation auf einem großen Bildschirm, der Zweite auf einem Smartphone.Ich muss elfmal[/size][/color][color=#1C2837][size=2] auf dem Bildschirm die Tabelle verschieben, um alles an Inhalt zu erfassen. Das macht kein Mensch. Der klickt die Seite weg. Wie muss ich also vorgehen, damit die Tabelle(GridView / kartik) auf einem Smartphone skaliert wird?Hier die LayoutFile:[/size][/color]





?php


use yii\helpers\Html;

use common\classes\AssetBundle;

?>

<?php

AssetBundle::register($this);

?>

<?php $this->beginPage() ?>

<!Doctype html> <!-- Definition des doctype-Modus -->

<html> <!-- Definition des Stammverzeichnises -->

    <head> <!-- Definition des Kopfbereiches -->

        <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <title><?= Html::encode($this->title) ?></title>

        <style>

            body{

                background-color: #D8D8D8 !important;

            }

        </style>

        <?php $this->head() ?>

    </head>

    <body>

        <?php $this->beginBody() ?>

        <?= $content ?>

        <?php $this->endBody() ?>

    </body>

</html>

<?php $this->endPage() ?>



und hier die Assetklasse:





<?php


namespace common\classes;


class AssetBundle extends \yii\web\AssetBundle {


    public $basePath = '@webroot';

    public $baseUrl = '@web';

    public $css = [

            //'css/font-awesome.min.css',

            //'css/lightbox.min.css'

    ];

    public $depends = [

        'yii\web\YiiAsset',

        'yii\bootstrap\BootstrapAsset',

        'yii\bootstrap\BootstrapPluginAsset',

    ];


    public function init() {

        parent::init();

        $this->publishOptions['beforeCopy'] = function ($from, $to) {

            return preg_match('%(/|\\\\)(fonts|css)%', $from);

        };

    }

}



Hier noch meine GridView





<div class="table-responsive">

    <?=

    GridView::widget([

        'dataProvider' => $dataProvider,

        'filterModel' => $searchModel,

        'tableOptions' => ['class' => 'table-responsive'],

        'responsiveWrap' => true,

        'columns' => $gridColumn,

        'panel' => [

            'type' => GridView::TYPE_PRIMARY,

            'before' => Html::a('<i class="glyphicon glyphicon-plus"></i> zur Übersicht', ['/immobilien/preview'], ['class' => 'btn btn-info']),

            'after' => Html::a('<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>Termin vereinbaren', ['/immobilien/termin'], ['class' => 'btn btn-success']),

            'heading' => '<span class="glyphicon glyphicon-book"></span>  ' . Html::encode($this->title),

            'class' => 'danger',

            'class' => 'table-responsive'

        ],

        'toolbar' => [

            '{export}',

            '{toggleData}'

        ],

    ]);

    ?>

</div>



Tabellen auf dem Smartphone darstellen ist eher schwierig. Allein vom Platz her ist eine Tabelle nicht wirklich geeignet um Inhalte auf kleinen Bildschirmen darzustellen.

Da wäre es sinnvoller statt einem GridView die Inhalte auf eine andere Weise darzustellen.