playing with mobile display for tables

public/css/app.css

@@ -1,4 +1,3 @@
-@import url(https://fonts.googleapis.com/css?family=Nunito);
 @charset "UTF-8";
 /*!
  * Bootstrap v4.6.0 (https://getbootstrap.com/)

public/css/jk.css

@@ -21,3 +21,9 @@
 	text-align:center;
 	padding:10px;
 }
+@media (max-width:575.98px){
+
+.col-md-12{
+	
+}
+}

resources/views/beers/index.blade.php

@@ -21,7 +21,7 @@
                 <th scope="col">Name</th>
 		<th scope="col">Brewery</th>
 		<th scope="col">Style</th>
-    @if (Auth::user()->isAdmin())<th colspan="2" scope="col">Admin</th>@endif
+    @if (Auth::user()->isAdmin())<th scope="col">Admin</th>@endif
               </tr>
             </thead>
 
@@ -32,8 +32,8 @@
 		<td><a href="/brewery/{{$beer->brewery_id}}">{{$beer->brewery}}</a> </td>
 		<td>{{$beer->type}} </td>
     @if (Auth::user()->isAdmin())
-<td><a href="{{ route('beers.edit',$beer->beer_id)}}" class="btn btn-primary">Edit</a></td>
-<td><form action="{{ route('beers.destroy', $beer->beer_id)}}" method="post">
+<td><a href="{{ route('beers.edit',$beer->beer_id)}}" class="btn btn-primary">Edit</a>
+<form action="{{ route('beers.destroy', $beer->beer_id)}}" method="post">
   @csrf
   @method('DELETE')
   <button class="btn btn-danger" type="submit">Delete</button>