cssでタイムラインを作成したいです。

CSS初心者です。
現在SNSのタイムラインを作成してます。（投稿した物のタイトル/投稿者名/内容が表示される。）
そこで写真のように現状上記の物が全て横並びで表示されてしまい、実現したいものとはかけ離れています。
この状態から
タイトル

ユーザーネーム

内容

のように縦に表示されるようにしたいのですが、そのHTMLとCSSをどのようにコーディングすればいいかご教授頂きたいです。
以下がビューファイルのコードになります。
一応ブートストラップ４、３も使用しているのですが、正直使い方がいまいちな状態です。
大変見苦しいコードだとは思いますが、よろしくお願いします。

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.js"></script>
    <script src="jquery.infinitescroll.min.js"></script>
<body>  
    <style>
        .username {
            
        }
        .title {    
        
        }
        .message {
            
        }
        .comment {
            
        }
        .retweet {
            
        }
        img {
            border:5px solid;
        }
        body {
            background-color:#ccffff;
        } 
        
        .count　{
            float:left;
            border:4px solid blue;
            background-color:white;
        }
        .btn-push　{
            display: inline-block;
            text-decoration: none;
            background: #87befd;
            color: #FFF;
            width: 120px;
            height: 120px;
            line-height: 120px;
            border-radius: 50%;
            text-align: center;
            overflow: scroll;
            transition: .4s;
        }

        .btn-push:active {
            transform: translateY(4px);
            border-bottom: none;
        }
        .timeline　{
            flex-direction: column;
            position:relative;top:-290px;
            background-color:white;
            border:groove #aaa;
            margin:20px;
            height:100000px;
            line-height:135px;
            text-align:center;
            float:right;
        }
    </style>
</head>
</body>
</html>

<div class="img"><img src = "http://localhost/cakephp/img/<?php echo $profile['User']['profile_Image']?>" width="200px" height="200px"></div> 

<table>
    <tr>
        <th>ID</th>
        <td><p><?php echo $profile['User']['id'] ?></p></td>
    </tr>
    <tr>
        <th>Username</th>
        <td><p><?php echo $profile['User']['username'] ?></p></td>
    </tr>
        <th>Email</th>
        <td><p><?php echo $profile['User']['email'] ?></p></td>
    </tr>
    <tr>
        <th>Firstname</th>
        <td><p><?php echo $profile['User']['firstname'] ?></p></td>
    </tr>
    <tr>
        <th>Lastname</th>
　      <td><p><?php echo $profile['User']['lastname'] ?></p></td>
    </tr>

</table>
<div class="count">
<ul>
    <li><h4>Posts:<?php echo count($posts);?></h4></li>
    <li><h4>Following:<?php echo count($follower);?></h4></li>
    <li><h4>Follower:<?php echo count($followed);?></h4></li>
</ul>
</div>
<div class="timeline">
<table>
<h3>Time line</h3>
</tr>
    <?php foreach($posts as $key => $post):?>
        <tr>    
            <td class="username"><?php echo $post['User']['username'];?></td>
            <td class="title"><?php echo h($post['Post']['title']);?></td>
            <td class="message"><?php echo h($post['Post']['message']);?></td>
            
            <td class="comment"> 
            <?php echo $this->Html->link('Comment',array('controller'=>'Comments',
                                                         'action'=>'add_comment',    
                                                         'post_id'=>$post['Post']['id'],
                                                         'user_id'=>$post['User']['id']
                                                        ));?> 
            </td>
            <td class="retweet">
            <?php echo $this->Html->link('Retweet',array('controller'=>'Retweets',
                                                         'action'=>'index_retweet',    
                                                          $post['Post']['id']
                                                        ));?>  
            </td>   
                                                     
        </tr>
    <?php endforeach;?>

    <?php unset($post);?>
    </div>
    </div>

<div class="btn-push"><?php echo $this->Html->link('Add Post',array('controller'=>'posts','action'=>'add'));?></div>

</table>
コード

m.ts10806

2019/07/16 03:42

タグにある「CSSフレームワーク」とは何のことでしょうか。また、直接の関係はありませんが、画像src指定で「http://localhost/cakephp/」のように直に書いてるのはあまり良い実装ではないと思います（他の環境で動きません）ヘルパーが用意されているのでそちらを使われてはと。 https://book.cakephp.org/3.0/ja/views/helpers/html.html#id4 ※ただしCSSタグだけで回答を得たいのでしたらPHPコード込みのものではなくブラウザに表示されたHTMLソースそのままのほうが回答を得やすくなります。

m.ts10806

2019/07/16 03:44

というか・・・ <head>の中に<body>が入っていたり</html>のあとにHTML差し込んでいたり、HTML構文的にだいぶNGのような。これでは正しく動くものも動かないと思います。（動いたとしても注意すべきですね）