It's definitely doable. Maybe it would require a bit of javascript to change the order of some items if it's too complex for flexbox.

Is the screenshot an actual website or is it a mockup ? If it's a real website, you can check how they did it.

How familiar are you with CSS ? I suppose with some flexbox it should be doable. Have you started anything and can we can help you with specific details ?

    clarkwinkelmann

    I wrote this for mobile but I cant carry views and comment numbers to bottom without using display: absolute

    @media (max-width: 767px) {
    
    .DiscussionListItem-info .item-excerpt {
        display: inherit!important;
        overflow: hidden!important;
        white-space: nowrap!important;
        text-overflow: ellipsis!important;
    }
    
    .DiscussionListItem-content {
    
    border-radius: 4px;
    padding-bottom: 10px;
    border:0px solid #dbdfe6!important;
    -webkit-box-shadow: 0px 4px 4px 3px rgba(84,102,134,0.05) !important;
    box-shadow: 0px 4px 4px 3px rgba(84,102,134,0.05) !important;}
    
    
    .DiscussionListItem {
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border-radius: 4px;
    margin-top:5px;
    
    }
    
    
    .DiscussionListItem-info li{
    
    display: block;
    
    }
    
    
    
    .DiscussionListItem-info {
        white-space: nowrap;
         overflow: unset !important; 
        text-overflow: ellipsis;
    }
    
    }

    [deleted] Firstly thank you very much your reply, Your design is very good. Comment, vote and discuss view's position is good but category tag's location is narrow. I think it is not good for my website because I use sub categories much and I use categories more than one(up to two). I can't select just sub category. I have to select it with together its main category. for instance, There is fruits category and there apple, peach, and cherry sub catagories and I cant select just apple or cherry. System forces me to select it with together its main category fruit. So that I need more length area for category tag.

      • [deleted]

      fakruzaruret it's not hard. In your browser (I'm using Chrome here as an example) you can load the site, press F12 to open the developers console, then right click the particular element you are interested in, then choose inspect with the left mouse button.

      This will allow the CSS applied to that particular element. Also, the link I posted above has a good portion of the CSS you need.

      • [deleted]

      fakruzaruret This ought to fix that

      @media (max-width: 767px) {
      .TagLabel {
          padding: .1em .3em;
      }
      }